如何在 Angular 的地图上使用 ngFor 和 ngModel答案

【问题标题】：How Can I Use ngFor and ngModel on a map in Angular如何在 Angular 的地图上使用 ngFor 和 ngModel
【发布时间】：2019-12-16 14:11:50
【问题描述】：

我有一个地图 app_access；它表示应用程序列表和访问这些应用程序的布尔值。我想使用 ngFor 和 ngModel 来控制地图中的布尔值。

我想做一些类似的事情：

<div *ngFor="let app of app_access">
    <input type="checkbox" [(ngModel)]="app.value" />
<div/>

我无法让它在我的应用上运行，并收到有关地图不可迭代的错误。

【问题讨论】：

使用keyvalue 管道。 <div *ngFor="let app of app_access | keyvalue">
你应该制定一个答案，因为这实际上是一个:)
感谢您的提示。可悲的是，我正在使用 angular 5（愚蠢，但由于某些原因我不能使用最新版本）并且无法访问键值管道。你知道另一种解决方法吗？

标签： angular dictionary ngfor ngmodel

【解决方案1】：

是的，你可以。您需要先用 div 的结束标签更正错字。

Stackblitz Demo

.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  app_access = [{
    value: true,
    name: 'Cx1'
  }];
}

.html

<div *ngFor="let app of app_access">
    {{app.name}} <input type="checkbox" [(ngModel)]="app.value" />
</div>

{{ app_access[0].value}}

【讨论】：