ngOnChanges Angular 2 没有分配不同的值答案

【问题标题】：ngOnChanges Angular 2 doesn't assign different valuesngOnChanges Angular 2 没有分配不同的值
【发布时间】：2018-09-20 17:46:38
【问题描述】：

我有公共值 cursorUrl 和方法，它检查 url 是否存在，如果存在则分配 urlCursor='pointer'，如果不存在则分配 urlCursor='text'。

该方法似乎工作正常，但是它将每个项目分配给urlCursor='pointer'，即使控制台日志显示它应该是

pointer
text
text
text

这是我的方法：

ngOnChanges(changes: any) {
    let index = 0;
    this.urlCursor = 
        this.checkUrl(changes.items.currentValue[0].redirectionViewUrl);
    index++; 
    console.log(this.urlCursor);
}

这是html：

<div class="items" #item(window:resize)="itemResizeHandler();" >
    <app-item
        *ngFor="let item of items"
        class="item-element"
        [ngStyle]="{'cursor': urlCursor}"
        [dataMode]="item.dataMode"
        [redirectionViewUrl]="item.redirectionViewUrl"
    ></app-item>
</div>

有人知道为什么它没有正确绑定吗？

【问题讨论】：

请分享 'itemResizeHandler' 和 'checkUrl' 的代码。

标签： angular angular2-template two-way-binding

【解决方案1】：

绑定工作正常。您的 urlCursor 不是变量数组，而是单个变量，因此最后分配给它的任何值都将用于所有值。尝试修改 ts 文件中的代码，例如：

public urlCursor: string[] = []
...
ngOnChanges(changes: any) {
    ...
    this.urlCursor = []; 
    this.urlCursor.push(
      this.checkUrl(changes.items.currentValue[0].redirectionViewUrl)
    );
    ...
}

和html之类的：

<app-item
  *ngFor="let item of items; let ind=index"
   class="item-element"
   [ngStyle]="{'cursor': urlCursor[ind]}"
   [dataMode]="item.dataMode"
   [redirectionViewUrl]="item.redirectionViewUrl"
></app-item>

【讨论】：