[英]*ngIf - reference a property which needs to be set more than once
On Angular 6
, I've got a WIJMO grid on my template. 在Angular 6
上,我的模板上有一个WIJMO网格。 This grid pulls from a database table. 该网格从数据库表中提取。 Each row of the grid should have either a delete
button or an un-delete
button, depending on *ngIf else
: 网格的每一行都应该具有delete
按钮或un-delete
按钮,具体取决于*ngIf else
:
<wj-flex-grid>
<wj-flex-grid-column [header]="'ID'" [binding]="'ID'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'deleted'" [binding]="'deleted'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
<button *ngIf="!deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
My problem lies with setting this deleted
property in the .ts file. 我的问题在于在.ts文件中设置此deleted
属性。 I need to set and read this property multiple times AKA for every row of the table - but *ngIf
only wants to use it after the last time it is defined. 我需要为表的每一行多次设置和读取此属性,但*ngIf
只想在最后一次定义后使用它, *ngIf
。 So for my typescript, which uses a for loop
on every data item and sets deleted
property to true or false based on a database column, if the last row of the grid is marked as deleted in the database, then all the buttons will show undelete
and vice versa: 因此,对于我的打字稿,该打字稿在每个数据项上使用一个for loop
,并根据数据库列将deleted
属性设置为true或false,如果网格的最后一行在数据库中被标记为Deleted,则所有按钮将显示undelete
反之亦然:
export class myComponent extends WjFlexGridParent implements OnChanges, OnInit {
/////// deleted property //////
////// *ngIf only likes to read this after the last time it is defined //////
public deleted: boolean;
loadData() {
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
/////// delete/undelete logic //////
for (var i = 0; i < data.length; i++) {
if (data[i].deleted == null) {
this.deleted = false;
}
else if (data[i].deleted !== null) {
this.deleted = true;
}
}
errorCode => {
// this.statusMessage = "";
}
}
);
}
}
How can I get *ngIf
to read this property after every time it is updated? 每次更新后,如何获取*ngIf
读取此属性?
Solved - only one small line of code needed to be changed in the HTML, and the for loop
in the .ts file can be completely removed. 已解决-仅需要在HTML中更改一小段代码,即可完全删除.ts文件中的for loop
。
Special thanks to Jeto and Aragorn in the comments section who pointed me in the right direction, and Sharad from GrapeCity (WIJMO) support for the final answer. 特别感谢Jeto和Aragorn在评论部分向我指出了正确的方向,以及来自GrapeCity(WIJMO)的Sharad对最终答案的支持。
For all you WIJMO
FlexGrid
people, I just bound *ngIf
to my items.deleted
attribute in the html (similar to what Aragorn suggested when he wrote: 'It looks like the data you are getting already has the deleted attribute, just use that.'
). 对于您所有的WIJMO
FlexGrid
员工,我都将*ngIf
绑定到html中的items.deleted
属性(类似于Aragorn写道时所建议的内容: 'It looks like the data you are getting already has the deleted attribute, just use that.'
)。
HTML: HTML:
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
//// set *ngIf="!item.deleted" ////
<button *ngIf="!item.deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
TS: TS:
loadData() {
var self = this;
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
//// for loop was not needed ////
},
errorCode => {
// this.statusMessage = "";
}
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.