Question

我在textarea中有button和ngFor。我想用文本区域中输入的值在button单击时调用一个函数。这是我的代码：

<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

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

组件

// 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 2

<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 3

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

处理ngFor内部的textarea输入

3 个答案: