ngOnChanges Angular 2 不分配不同的值
ngOnChanges Angular 2 doesn't assign different values
我有 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>
有谁知道为什么绑定不正确?
绑定工作正常。您的 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>
我有 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>
有谁知道为什么绑定不正确?
绑定工作正常。您的 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>