收到的setInterval数据关闭打开的子项

时间:2016-06-09 13:34:44

标签: angular setinterval

我有一个* 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>

0 个答案:

没有答案