javascript - Ako spraviť, aby ngFor s inputom vo vnútri nezopakoval zadávanú hodnotu?


Potrebujem vytvoriť viacero vstupov s ngFor, ale keď zadám slovo, opakuje sa vo všetkých existujúcich vstupoch, ako to môžem vyriešiť?

môj kód:

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

Odpoveď č. 1

Viažete premennú 'comment.text' na každý vstup [model]. To znamená, že jej hodnota je zdieľaná medzi všetkými vašimi vstupnými rozsahmi. Potrebujete použiť 'publication', ktorá má rozsah iba pre každý vstup.

*ngFor="let publication of publications"

Zmeňte [(ngModel)]="comment.text" na niečo ako [(ngModel)]="publication.text"

Odpoveď č. 2

Všetky vstupy viažete na jednu vlastnosť comment.text. Mali by ste vytvoriť jednu vlastnosť pre každý vstup a viazať vstup s ňou.