如何使带有输入的 ngFor 不重复输入值？

Question

我需要用 ngFor 进行多个输入，但是当我输入一个单词时，它会在所有输入中重复出现，我该如何解决这个问题？

我的代码：

    <div class="" *ngFor="let publication of publications">
            ...
        <form #newCommentForm="ngForm" (ngSubmit)="onSubmit(newCommentForm, $event, publication._id)">
           <div class="make-comment" >
              <img src="{{url+ 'get-image-user/' + publication.user.image }}" *ngIf="publication.user.image" class="rounded-circle-mini align-self-center">              
              <input type="text" name="#text" #text="ngModel" [(ngModel)]="comment.text" id="input-coment" class="form-control" required placeholder="Your comment">
              <button class="btn btn-sm btn-secondary" style="color: #fff;" type="submit"><i class="bi bi-arrow-bar-left"></i></button>    
            </div>
          </form>
        </div>

Answer 1

您正在将所有输入绑定到单个属性 comment.text。您应该为每个输入创建一个属性并将输入与其绑定。

Answer 2

您将变量 'comment.text' 绑定到每个输入 [模型]。意思是，它的值在所有输入范围之间共享。您需要使用 'publication'，它仅适用于每个输入。

*ngFor="let publication of publications"

将 [(ngModel)]="comment.text" 更改为 [(ngModel)]="publication.text"

如何使带有输入的 ngFor 不重复输入值？

How do I make ngFor with input inside not repeat the typing value?

javascript

typescript

ngfor

angular