Question

我有一个像这样的HTML代码。

<ul>
    <li *ngFor="let dataMakanan of hehe">
      {{ dataMakanan.makanan }}<br>
      {{ dataMakanan.deskripsi }}<br>
      <ion-icon name="remove"(click)="kurangPorsi()"></ion-icon> {{counter}} <ion-icon name="add" (click)="tambahPorsi()"></ion-icon>

    </li>
  </ul>

这段代码意味着我想尽可能多地显示hehe，我想对每个值进行增量或减量。但是当我做增量或减量时，它会影响所有数据。

例如，它在屏幕上显示3个数据，我想增加它.. 所有数据都加一，但我想要的只是增加我点击的特定数据。

我使用firebase和ionic

我只是想灵活处理，而不是仅限1位用户..

Answer 1

尝试这样的事情

@Component({
  selector: 'my-app',
  template: `
  <ul>
    <li *ngFor="let info of information">
      <pre>{{ info.description }}</pre>
    </li>
  </ul>

  <input #newInfo (keyup.enter)="addInfo(newInfo.value)" (onclick)="addInfo(newInfo.value); newInfo.value='' ">

  <button (click)="addInfo(newInfo.value)">Add</button>
  `
})
export class AppComponent {
  information = [];

  myInfo = this.information[0];

  addInfo(newInfo: string) {
    if (newInfo) {
      this.information.push(new ContactInfo(newInfo));
    }
  }

}

Answer 2

您只需要为hehe数组中的每个对象设置计数器。

HTML：

<ul>
    <li *ngFor="let dataMakanan of hehe; let i = index">
        {{ dataMakanan.makanan }}<br>
        {{ dataMakanan.deskripsi }}<br>
        <ion-icon name="remove" (click)="kurangPorsi(i)"></ion-icon> 
        <!-- instead of common counter, we use separate counter for each object -->
        {{dataMakanan.counter}} 
        <ion-icon name="add" (click)="tambahPorsi(i)"></ion-icon>
    </li>
</ul>

TS：

public hehe = [
    { makanan: 'name1', deskripsi: 'description1', counter: 0 },
    { makanan: 'name2', deskripsi: 'description2', counter: 0 },
]

kurangPorsi(index: number) {
    this.hehe[index].counter--;
}

tambahPorsi(index: number) {
    this.hehe[index].counter++;
}

如何用ngFor做一个数组

2 个答案: