Question

我创建了一个名为progress-bar的组件，它定义了一个输入progress。然后我在视图中的ngFor循环中使用它，如下所示。

在视图中

，默认情况下，所有进度条都显示0％进度（loadProgress = 0）。我希望当我单击每行中的按钮时，相应的进度条可以显示从0％到100％的进度（`loadProgress值从0到100逐渐增加）。

我的问题

当我点击任何按钮时，所有进度条都在移动，因为它们都链接到同一个变量loadProgress。我知道每个的输入应该是不同的，但我不知道如何构建它。我要改变组件的输入吗？

查看

<item *ngFor="let item of items;">
  <progress-bar [(progress)]="loadProgress"></progress-bar>
  <button (click)="progressMove()"></button>
</item>

组件

import { Component, Input } from '@angular/core';

@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {

  @Input('progress') progress;
  constructor() {
  }
}

Answer 1

您可以在每个项目中使用progress变量。

<item *ngFor="let item of items;">
  <progress-bar [progress]="item.progress || 0"></progress-bar>
  <button (click)="item.progress = 100"></button>
</item>

由于你没有在item对象中声明进度，所以应该小心，因此|| 0

请参阅此处的示例：http://plnkr.co/edit/4vIfVKCFXCD6xWmpm5WK?p=preview

ngFor中的不同行与不同的组件输入

1 个答案: