对象上的 NgFor + 为 NgFor 中的每个属性创建 NgModel答案

【问题标题】：NgFor on Object + Create NgModel for each property in NgFor对象上的 NgFor + 为 NgFor 中的每个属性创建 NgModel
【发布时间】：2019-03-29 13:10:39
【问题描述】：

在对象上创建 ngfor 时遇到问题，我的 ngfor 包含每个属性的 ngModel

代码如下：

<div *ngFor="let key of objectKeys(todo)">

          <ion-item *ngIf="getObjectDataType(key) == 'String' && key != 'Description'">
              <ion-label floating>{{key}}</ion-label>
              <ion-input type="text" [(ngModel)]="this['todo.' + key]"  [ngModelOptions]="{ standalone : true }"></ion-input>
          </ion-item>

          <ion-item *ngIf="getObjectDataType(key) == 'String' && key == 'Description'">
              <ion-label floating>{{key}}</ion-label>
              <ion-textarea [(ngModel)]="this['todo.' + key]"  [ngModelOptions]="{ standalone : true }"></ion-textarea>
          </ion-item>

          <ion-item *ngIf="getObjectDataType(key) == 'Date' && key != 'Description'" 
              style="margin-top: 15px;">
              <ion-label>{{key}}</ion-label>
              <ion-datetime displayFormat="MM/DD/YYYY hh:mm A" [min]="yesterDayStr"
                 [(ngModel)]="this['todo.' + key]"  [ngModelOptions]="{ standalone : true }"></ion-datetime>
          </ion-item>

 </div>

这个 ngModel 中的预期模型字符串是 > todo.title

但属性不会绑定到相应的输入

谢谢

【问题讨论】：

标签： angular object ngfor ngmodel

【解决方案1】：

你不应该在模板中使用this，更改你的代码如下，

 <ion-item *ngIf="getObjectDataType(key) == 'String' && key != 'Description'">
              <ion-label floating>{{key}}</ion-label>
              <ion-input type="text" [(ngModel)]="['todo.' + key]"  [ngModelOptions]="{ standalone : true }"></ion-input>
 </ion-item>

【讨论】：

【解决方案2】：

同意@Sajeetharan，我们不需要使用“this”并尝试使用“todo[key]”。

<div *ngFor="let key of objectKeys(todo)">

          <ion-item *ngIf="getObjectDataType(key) == 'String' && key != 'Description'">
              <ion-label floating>{{key}}</ion-label>
              <ion-input type="text" [(ngModel)]="todo[key]"  [ngModelOptions]="{ standalone : true }"></ion-input>
          </ion-item>

          <ion-item *ngIf="getObjectDataType(key) == 'String' && key == 'Description'">
              <ion-label floating>{{key}}</ion-label>
              <ion-textarea [(ngModel)]="todo[key]"  [ngModelOptions]="{ standalone : true }"></ion-textarea>
          </ion-item>

          <ion-item *ngIf="getObjectDataType(key) == 'Date' && key != 'Description'" 
              style="margin-top: 15px;">
              <ion-label>{{key}}</ion-label>
              <ion-datetime displayFormat="MM/DD/YYYY hh:mm A" [min]="yesterDayStr"
                 [(ngModel)]="todo[key]"  [ngModelOptions]="{ standalone : true }"></ion-datetime>
          </ion-item>

 </div>

【讨论】：