处理ngFor中的textarea输入

Question

我在textarea里面有button和ngFor。我想在button上调用一个函数，点击textarea中输入的值。这是我的代码：

<div class="col-xl-3 col-lg-4" *ngFor="let item of items">
    <div class="container-fluid p-0 m-0">
        <div class="row">
            <div class="col-12 p-0">
                <textarea  placeholder="Enter value" rows="5"
                 matInput maxlength="150" [(ngModel)]="inputText"></textarea>
            </div>
        </div>
        <div class="row">
            <div class="col-12 p-0">
                <button mat-raised-button color="accent" (click)="onSubmit()">Submit</button>
            </div>
        </div>
    </div>

</div>

对于textarea我做了[(ngModel)]="inputText"。现在因为inputText在任何地方都是相同的，即使我输入一个字段，所有字段都显示相同的文本。

解决方案我提出了

我可以在项目中添加一个新字段并使用[(ngModel)]="item.enteredValue"进行绑定。但是这个项目列表很大，它来自服务器，因此我不想在其中添加额外的字段，这不是必需的。

还有其他方法可以达到这个目的吗？

Answer 1

<div class="col-xl-3 col-lg-4" *ngFor="let item of items; let i = index">
    <div class="container-fluid p-0 m-0">
        <div class="row">
            <div class="col-12 p-0">
                <textarea  placeholder="Enter value" rows="5"
                 matInput maxlength="150" [(ngModel)]="inputTexts[i]"></textarea>
            </div>
        </div>
        <div class="row">
            <div class="col-12 p-0">
                <button mat-raised-button color="accent" (click)="onSubmit(inputTexts[i])">Submit</button>
            </div>
        </div>
    </div>
</div>

然后你只需要一个数组inputTexts: string[] = [];

Answer 2

假设您的商品具有唯一标识符，您可以执行以下操作：

零件

// define an empty object
inputText = {}

onSubmit(itemId: string) {
  submit(inputText[itemId]);
}

模板

<div *ngFor="let item of items">
  <!-- bind to a value of the object using the items id -->
  <textarea [(ngModel)]="inputText[item.id]"></textarea>
  <button (click)="onSubmit(item.id)">Submit</button>
</div>

---

或者，你可以像@awe指出的那样重复使用项目本身。

<div *ngFor="let item of items">
  <textarea [(ngModel)]="item.myText"></textarea>
  <button (click)="onSubmit(item.myText)">Submit</button>
</div>

// in your component
onSubmit(text: string) {
  submit(text);
}

Answer 3

您说您不想向模型添加新字段，但实际上您不需要将字段添加到源模型。当您使用[(ngModel)]="item.enteredValue"绑定您的方式时，该字段会在javascript项目对象上动态添加，并在您提交时可用于您的客户端javascript代码。然后，您可以读取项目列表中每个项目的值，并按照您的意图使用它。即使javascript项目对象现在包含enteredValue字段，它也不需要是来自服务器的原始数据模型的一部分。