时间戳

首页 > 解决方案 > 如何恢复angular 8中的先前更改

typescript - 如何恢复angular 8中的先前更改

问题描述

我正在尝试恢复以前的更改。例如，如果我在选项卡一中选择了复选框和下拉值，然后单击选项卡二并选择了一些下拉值，然后单击选项卡一。现在我想查看以前在复选框和下拉列表中的更改。我们如何可以做到？是否有可能在角度 8 中。

app.component.html：

<my-tabs (selectedTabClick)="test($event,'tab_one')">
  <my-tab [tabTitle]="'Tab 1'"  id="tab_one" #tab_one>
  <div *ngIf="tabflag.tab_one">
    <table>....</table>
  </div>
  </my-tab>
  <my-tab tabTitle="Tab 2" id="tab_two" #tab_two>
  <div *ngIf="tabflag.tab_two">
  <table>....</table>
  </div>

  </my-tab>
</my-tabs>

演示：https ://stackblitz.com/edit/angular-tabs-example-6a8jmb?file=app%2Fapp.component.html

标签： typescriptangular7angular8

解决方案

你好@Nila Vanni你可以使用[hidden]属性，如果你使用*ngIf它会在条件下运行，如果条件不满足，那么它将从DOM中删除，所以你需要处理一些代码这里是代码

  1. 把[hidden]="tabflag.tab_one"而不是*ngIf="tabflag.tab_one"
  2. 把[hidden]="tabflag.tab_two"而不是*ngIf="tabflag.tab_two"
  3. 放tabflag={ tab_one:true, tab_two:false }

最后将方法test(event)方法放入ts

test(event){
    console.log(event);
    if(event.tab.id == 'tab_one') {
      this.tabflag.tab_one = false;
      this.tabflag.tab_two = true;
    } 

    if(event.tab.id == 'tab_two'){
      this.tabflag.tab_two = false;
      this.tabflag.tab_one = true;
    }
  }

推荐阅读