我有一个* ngFor的mainItem列表,每个都有一个* ngFor的subItem列表。当我加载mainItems列表并按下mainItem上的“加号”图标时,它会打开一个subItems列表。
通过以下代码获得打开/关闭功能:
<span class="glyphicon glyphicon-plus-sign " title="sub items" (click)="item.hideme = !item.hideme"></span>
每个mainItem创建它自己的属性item.hideme并在true / false之间切换。
我使用setInterval函数从文件加载mainItems和subItems的内容,并每隔1秒将其放入一个内容数组中。 问题是每次setInterval更新this.contentArray并关闭所有子项,因为新的contentArray在初始化时没有item.hideme属性。
如何加载新数据并维护已打开的子项的切换状态?
我用来完成预期功能的TypeScript类:
@Component({
providers: [StructureRequestService],
styleUrls: ['app/home/home.css'],
templateUrl:'./app/home/homePageTemplate.html'
// directives: [ AttachmentComponent ]
})
export class HomeComponent {
contentArray = [];
myRes: Content;
showAssigned:boolean = false;
showSubitems:boolean = false;
showUsers:boolean = false;
constructor(private structureRequest: StructureRequestService) {
setInterval(() => {
this.timerGetStructure();
}, 1500);
}
//using with setInterval to get new data and sets into content Array with this.updateItems(result)
timerGetStructure() {
this.structureRequest.sendRequest().subscribe((result) => this.updateItems(result));
}
updateItems(result) {
this.myRes = result;
this.contentArray = this.myRes.content;
}
ngOnInit() {
//makes http request and puts result into contantArray
this.structureRequest.sendRequest().subscribe((result) => this.viewNodes(result));
}
//view items
viewNodes(result) {
//console.log(result);
this.myRes = result;
this.contentArray = this.myRes.content;
this.showAssigned = true;
}
}
homePageTemplate.html:
<div class="row" *ngFor="let item of contentArray">
<span class="glyphicon glyphicon-plus-sign " title="sub items" (click)="item.hideme = !item.hideme"></span>
<div class=" itemName" title="State:{{item.state}},Type: {{item.type}}">{{item.name}}</div>
<div class="row" *ngIf="item.hideme">
<div class="row" *ngFor="let child of item.children">
<div class=" itemName" title="State:{{child.state}}>{{child.name}} </div>
</div>
</div>
</div>