angular - ngOnChanges Angular 2 不分配不同的值

标签 angular angular2-template two-way-binding

我有公共(public)值 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>

有谁知道为什么绑定(bind)不正确?

最佳答案

绑定(bind)工作正常。您的 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>

关于angular - ngOnChanges Angular 2 不分配不同的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52430580/

相关文章:

angular - 我如何使用 ngFor 将 Typescript Enum 作为字符串数组进行迭代

angular - 使用 getter 和 setter 拦截@Input 变化

css - md-menu 覆盖 Angular 2 中的默认最大宽度

Angular:链式双向属性绑定(bind)

angular - 复选框 ngFor Angular2 上的双向绑定(bind)

javascript - 检测 Angular 4 中组件的变化

javascript - Angular 2 : How to get a reference to a ViewChild in a child component

angular - 如果列表为空,如何禁用 mat-form-field 或 mat-autocomplete?

Angular 2打印组件

javascript - Angular 2双向数据绑定(bind)冗余 setter 调用