ngOnChanges Angular 2没有分配不同的值

时间:2018-09-20 17:46:38

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

我有一个公共值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>

有人知道为什么绑定不正确吗?

1 个答案:

答案 0 :(得分:2)

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

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

和htlm一样:

<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>