Angular ngFor 中的 ngModel，带有管道和映射，不工作

Question

我在这种情况下遇到问题：

@Component({
  selector: 'my-app',
  template: `
    {{items | async| json}}

    <div *ngFor="let item of items | async">
      <input type=checkbox [(ngModel)]="item.b"/>
    </div>
  `
})
export class AppComponent  {
  items = of([{
    name: '1',
  },
  {
    name: '2',
  },
  {
    name: '3',
  }])
  .pipe(map(i=>{
    return i.map(i=>{
      return {
        i: i,
        b: false
      }
    })
  }))
}

Stackblitz app

问题是 ngModel 不工作，我看不到 b 属性的变化。如果我删除地图管道并将布尔值属性放在第一个数组中，一切正常。我错过了什么吗？有什么问题吗？

谢谢

Answer 1

其实你做的是对的。要检查我的意思，请将您的代码更改为：

<input type=checkbox (change)="change(item)" [(ngModel)]="item.b"/>

change(item) {
 console.log(item);
}

这没有反映在 dom 上，因为项目数组映射到相同的内存位置并且更改其中的元素不会导致 angular 中的更改检测触发显示变化。

Answer 2

你没有做错任何事。如果您在 ngFor 中渲染 {{item.b}}，您将看到值在 true 和 false 之间正确变化。正如另一个答案中提到的，这是因为引用和更改检测。您还可以使用 ngOnInit 和 subscribe:

将可观察数据简单地保存在 class 上属性

import { Component } from "@angular/core";
import { of } from "rxjs";
import { map } from "rxjs/operators";

@Component({
  selector: "my-app",
  template: `
    {{ items | json }}

    <form #myForm="ngForm">
      <div *ngFor="let item of items">
        <input [name]="item.i.name" type="checkbox" [(ngModel)]="item.b" />
      </div>
    </form>
  `
})
export class AppComponent {
  items: any[] = [];

  ngOnInit() {
    this.getData().subscribe(data => (this.items = data));
  }

  private getData() {
    return of([
      {
        name: "1"
      },
      {
        name: "2"
      },
      {
        name: "3"
      }
    ]).pipe(
      map(i => {
        return i.map(i => {
          return {
            i: i,
            b: false
          };
        });
      })
    );
  }
}

这是一个 example 的动作。如果需要避免内存泄漏，请不要忘记清理任何可观察对象。

Angular ngFor 中的 ngModel，带有管道和映射，不工作

Angular ngModel inside ngFor, with pipe and map, not working

rxjs

angular-ngmodel

angular