如何在 for 循环中只获得 1 个输入而不是所有输入？

Posted 2023-03-11

【中文标题】如何在 for 循环中只获得 1 个输入而不是所有输入？

【英文标题】：How to get only 1 input work instead of all input in for loop?

【发布时间】：2020-09-06 04:15:04

【问题描述】：

我正在做一个有角度的项目，我在 for 循环中有一个表单：

这是我的 Angular html 代码：

<ul class="border">

        <li *ngFor="let cake of cakes; let idx = index">
          <img class="d-inline-block" src="cake.url"   >
          <form class="d-inline-block form-rate">
            <div class="form-group">
              <select name="stars" [(ngModel)]="newRate.stars" class="custom-select">
                <option selected value="1">1 stars</option>
                <option value="2">2 stars</option>
                <option value="3">3 stars</option>
                <option value="4">4 stars</option>
                <option value="5">5 stars</option>
              </select>
            </div>
            <div class="form-group">
              <textarea name="comment" [(ngModel)]="newRate.comment" class="form-control" id="rate-comment" rows="4"
                placeholder="Type your comment here"></textarea>
            </div>
            <div class="form-group clearfix">
              <button class="btn btn-primary float-right btn-sm" (click)="ratingSubmit(cake._id)">Rate!</button>
            </div>

          </form>

        </li>

      </ul>

每当我输入 textarea 或以该表单选择一个值时，它都会在该 ul 中执行相同的操作。如何解决这个问题？

这是我的打字稿文件，用于在 html 中显示对象和数组。

export class RateSubmitComponent implements OnInit 
  cakes = [];
  cake = "";
  rates = [];
  rate = "";

  newCake: any;
  newRate: any;

  constructor(private _httpService: HttpService) 

  ngOnInit() 
    this.getCakesFromService();
    this.newCake =  name: "", url: "" ;
  

  getCakesFromService() 
    let observable = this._httpService.getCakes();
    observable.subscribe((data) => 
      this.cakes = data["data"];
    );
  

  getRatesFromService() 
    let observable = this._httpService.getRates();
    observable.subscribe((data) => 
      this.rates = data["data"];
    );
  

  onSubmit() 
    let observable = this._httpService.addCake(this.newCake);
    observable.subscribe((data) => 
      this.newCake =  name: "", url: "" ;
      this.getCakesFromService();
    );
  

  ratingSubmit(cakeId) 
    let observable = this._httpService.addRating(this.newRate, cakeId);
    observable.subscribe((data) => );
    this.newRate =  stars: "", comment: "" ;
    this.getRatesFromService();
  

【参考方案1】：

问题

您正在绑定导致此问题的不同控件（在 for 循环内）。

修复

您应该创建具有相同大小蛋糕的 newRate 数组，并使用索引idx 进行绑定。

ts 文件

let newRates= []; //create the same size of cakes array.

html

        <li *ngFor="let cake of cakes; let idx = index">
          <img class="d-inline-block" src="cake.url"   >
          <form class="d-inline-block form-rate">
            <div class="form-group">
              <select name="stars" [(ngModel)]="newRates[idx].stars" class="custom-select">
                <option selected value="1">1 stars</option>
                <option value="2">2 stars</option>
                <option value="3">3 stars</option>
                <option value="4">4 stars</option>
                <option value="5">5 stars</option>
              </select>
            </div>
            <div class="form-group">
              <textarea name="comment" [(ngModel)]="newRates[idx].comment" class="form-control" id="rate-comment" rows="4"
                placeholder="Type your comment here"></textarea>
            </div>
            <div class="form-group clearfix">
              <button class="btn btn-primary float-right btn-sm" (click)="ratingSubmit(cake._id)">Rate!</button>
            </div>

          </form>

        </li>

      </ul>

【讨论】：

我刚刚上传了我的 ts 文件。请看一下