Question

我想仅在总票数乘以10时才更新视图。我每10毫秒递增一个数组rows的随机元素，它们总计为总投票数。只有在满足某个条件时，角度2才能在模板中绑定和显示模型值吗？

模板：

<div>
  <ul class="list">
    <li class="item" *ngFor="let row of rows">{{ row }}</li>
  </ul>
</div>
<h3 class="title">Total number of votes: {{ votes }}</h3>

Answer 1

为了简单，干净和“Angular”，你应该使用基本的Pipe。

你的烟斗看起来像这样：

@Pipe({name: 'ten'})
export class MultiplesOfTenPipe implements PipeTransform {
  transform(value: number): number {
    return Math.floor(value / 10) * 10;
  }
}

这只会更新模板/视图中votes的值，因为它是一个可被10整除的数字。

查看此链接，了解其实际效果：https://stackblitz.com/edit/angular-xzuqnn

Answer 2

我不明白这个问题。您可以有两个变量（rows和rowsDisplays）

@Component({
  selector: 'app-home',
  template: `
  <div>
  <ul class="list">
    <li class="item" *ngFor="let row of rowsDisplay">{{ row }}</li>
  </ul>
</div>
  `
})
export class HomeComponent implements OnInit {

  rowsDisplay:any[]=[];
  rows:any[]=[];

  constructor() { }
  ngOnInit() {
    setInterval(()=>{
      this.rows.push(new Date());
      if (this.rows.length%10==0) //or another condition
        this.rowsDisplay=[].concat(this.rows); //you can't do this.rowsDisplay=this.rows, 
                            //because then this.rowsDisplay will be this.rows

    },1000);
  }
}

Angular 2仅在模型值满足条件时才更新模板

2 个答案: