Question

我在ngFor循环中尝试了双向数据绑定，该循环由对象数组组成，但是我无法使用[[ngModel）]区分输入字段。

     <div class="content-box" *ngFor="let content of contentList; let i = 
                             index;trackBy:trackByIndex;">
        <div class="drag-icon">
            <i class="material-icons">reorder</i>
        </div>
        <textarea *ngIf="content.type === 'text'" 
                  [(ngModel)]="content.text" 
                  placeholder="Type Here"></textarea>
        <div *ngIf="content.type === 'button'" class="text-center">
            <button type="button" class="btn-automsg">{{content?.button}} 
            </button>
            <label class="label-block">{{content?.block}}</label>
        </div>
        <div class="delete-icon">
            <i class="material-icons" 
               (click)="deleteBox(i)">delete_outline</i>
        </div>
    </div>

Answer 1

在您的代码中，我更改了

<button type="button" class="btn-automsg">{{content?.button}} </button>
放入<button type="button" class="btn-automsg">{{content?.text}} </button>

...我想我的目标是

检查相关的 HTML ，在* ngFor循环中，打印每行的内容，以便我们可以看到由于[(ngModel)]而导致的文本更改：

<div class="content-box" *ngFor="let content of contentList; let i = 
                             index;trackBy:trackByIndex;">
    Type:<mark>{{content.type}}</mark> - Text:<mark>{{content.text}}</mark>
    <div class="drag-icon">
        <i class="material-icons">reorder</i>
        </div>
        <textarea *ngIf="content.type === 'text'" 
                  [(ngModel)]="content.text" 
                  placeholder="Type Here"></textarea>
        <div *ngIf="content.type === 'button'" class="text-center">
            <button type="button" class="btn-automsg">{{content?.text}} 
            </button>
            <label class="label-block">{{content?.block}}</label>
        </div>
        <div class="delete-icon">
            <i class="material-icons" 
               (click)="deleteBox(i)">delete_outline</i>
        </div>
    </div>

如果有混淆，也许您可以建议对attached stackblitz进行更改，以便我提供帮助

如何在对象数组的ngFor中使用双向数据绑定（与键值对不同）？

1 个答案: