Immutable.js 与 Angular 2答案

【问题标题】：Immutable.js with angular 2Immutable.js 与 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>

【问题讨论】：

标签： arrays angular typescript immutable.js

【解决方案1】：

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

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

【讨论】：