NgFor on Object + Создать NgModel для каждого свойства в NgFor - PullRequest
Новая
       31

NgFor on Object + Создать NgModel для каждого свойства в NgFor

0 голосов
/ 25 октября 2018

Я столкнулся с проблемой при создании 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

Но свойство не будет привязано к соответствующему входу

Спасибо

Ответы [ 2 ]

0 голосов
/ 25 октября 2018

Согласитесь с @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>
0 голосов
/ 25 октября 2018

Вы не должны использовать 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>
...