Immutable.js 与 Angular 2

Posted 2023-03-13

【中文标题】Immutable.js 与 Angular 2

【英文标题】：Immutable.js with angular 2

【发布时间】：2017-05-21 00:48:03

【问题描述】：

在 angular 2 中使用 immutable.js 的正确方法？

我的应用程序正常工作，我正在尝试优化和重构以从应用程序中获得性能。我遇到了 immutable.js，我想将从 http 请求中检索到的数据更改为不可变数据，然后在有角度的 *ngFor 循环中调用它。

如果我执行控制台日志，数据会返回，但是当我尝试将数据映射到不可变对象时，我会得到一个对象映射，但我该如何访问它。我看到 map->rout->entries->Array[]->Array[] 我的数据在最后一个数组元素中。

// component.ts
import  Component, OnInit from '@angular/core';
import  Observable  from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import  List, Map  from 'immutable'; 
import * as Immutable from 'immutable'; 

@Component(
  selector: 'app',
  templateUrl: './component.html',
  styleUrls: ['./component.css'],
)

export class MyComponent implements OnInit 

  let myData:any = null;
  constructor(private http: Http) 
    this.callData("test.json");
  

  callData(targetUrl) 
      return this.http.get(targetUrl))
      .map((res) => res.json())
      .subscribe(
        (data) => 
         this.myData = [];
         this.myData = Immutable.Map(data);
         console.log(data); // RETURNS THE DATA
         console.log(this.myData); // RETURNS MAP
      );
  

// component.html
   <div *ngIf="myData != null">
       <div *ngFor="let key of myData; let i = index">
          <div class="someClass">
             myData[key].something
          </div>
       </div>
  </div>

【参考方案1】：

使用 Immutable.js，您应该使用 get 方法访问不可变对象或数组。

在您的模板中，执行以下操作： myData.get(key).something