Angularjs 如何基于按钮单击在同一视图上一次显示两种类型的json

我有一个带有两个按钮的视图：

List 1

&

List 2

在我的html中，我有一个动作，当有人点击

List 1

时，我带来了

List 1

的json并展示它，我有一个动作，当我点击

List 2

时，我得到了

List 2

的json

但是我不知道如何表示它，因为它在另一个结构中，然后列表返回到

列表1

。。。 在同一个视图上打印两种不同结构的json的更好解决方案是什么？因此，如果

List 2

被选中，请单击我想从视图中删除

List 1

，并显示

List 2

，反之亦然

这是我的组件。ts：

export class MyCmp implements OnInit {

  list1Data: Observable<List1Bulk[]>;
  list2Data: Observable<List2Bulk[]>

  constructor(private _myService: MyService) {
  };

  public showList1(): void {
    this.list1Data = this._myService.getList1Data();
  }

  public showList2(): void {
    this.list2Data = this._myService.getList2Data();
  }
}

导出类MyCmp实现OnInit{
列表1数据：可见；
list2Data：可观察的
构造函数（private\u myService:myService）{
};
public showList1（）：void{
this.list1Data=this.\u myService.getList1Data（）；
}
public showList2（）：void{
this.list2Data=this.\u myService.getList2Data（）；
}
}

这是我的component.html：

<div>
  <!-- list 1 button -->
  <button md-button
          (click)="showList1Data()"
          class="md-primary">List1</button>

  <!-- list 2 button -->
  <button md-button
          (click)="showList2Data()"
          class="md-primary">List2</button>

<md-content>
<h1 align="center">{{title}}</h1>
<h2>lists:</h2>
  <div class="list-bg"  *ngFor="#bulk of list1Data | async">
    ID: {{bulk.id}} Number of Items: {{bulk.numberOfItems}}
  </div>
</md-content>

清单1
清单2
{{title}}
清单：
ID:{bulk.ID}项目数：{{bulk.numberOfItems}

如何更改视图以同时显示list2data？我想点击列表2按钮，清除列表1数据并显示列表2数据

---

谢谢

为此使用

*ngIf

或

*ngSwitch

。在

MyCmp

中声明2个布尔属性

showingList1

和

showingList2

。单击按钮时相应地更新这些属性。然后，您的模板将如下所示：

<div>
<!-- list 1 button -->
<button md-button
        (click)="showList1Data()"
        class="md-primary">List1</button>

<!-- list 2 button -->
<button md-button
        (click)="showList2Data()"
        class="md-primary">List2</button>

<md-content>
<h1 align="center">{{title}}</h1>
<h2>lists:</h2>
<div *ngIf="showingList1">
    <div class="list-bg"  *ngFor="#bulk of list1Data | async">
        ID: {{bulk.id}} Number of Items: {{bulk.numberOfItems}}
    </div>
</div>
<div *ngIf="showingList2">
    <div class="list-bg"  *ngFor="#bulk of list2Data | async">
        ID: {{bulk.id}} Number of Items: {{bulk.numberOfItems}}
    </div>
</div>
</md-content>

清单1
清单2
{{title}}
清单：
ID:{bulk.ID}项目数：{{bulk.numberOfItems}
ID:{bulk.ID}项目数：{{bulk.numberOfItems}

为此使用

*ngIf

或

*ngSwitch

。在

MyCmp

中声明2个布尔属性

showingList1

和

showingList2

。单击按钮时相应地更新这些属性。然后，您的模板将如下所示：

<div>
<!-- list 1 button -->
<button md-button
        (click)="showList1Data()"
        class="md-primary">List1</button>

<!-- list 2 button -->
<button md-button
        (click)="showList2Data()"
        class="md-primary">List2</button>

<md-content>
<h1 align="center">{{title}}</h1>
<h2>lists:</h2>
<div *ngIf="showingList1">
    <div class="list-bg"  *ngFor="#bulk of list1Data | async">
        ID: {{bulk.id}} Number of Items: {{bulk.numberOfItems}}
    </div>
</div>
<div *ngIf="showingList2">
    <div class="list-bg"  *ngFor="#bulk of list2Data | async">
        ID: {{bulk.id}} Number of Items: {{bulk.numberOfItems}}
    </div>
</div>
</md-content>

清单1
清单2
{{title}}
清单：
ID:{bulk.ID}项目数：{{bulk.numberOfItems}
ID:{bulk.ID}项目数：{{bulk.numberOfItems}

您可以简单地将这两个属性组合起来，如下所示：

export class MyCmp implements OnInit {

      listData: Observable<List1Bulk[] | List2Bulk[]>;

      constructor(private _myService: MyService) {};

      public showList1(): void {
        this.listData = this._myService.getList1Data();
      }

      public showList2(): void {
        this.listData = this._myService.getList2Data();
      }
}

导出类MyCmp实现OnInit{
列表数据：可观察；
构造函数（私有_myService:myService）{}；
public showList1（）：void{
this.listData=this.\u myService.getList1Data（）；
}
public showList2（）：void{
this.listData=this.\u myService.getList2Data（）；
}
}

---

这样，您就不需要更改HTML中的任何内容。

您可以简单地将这两个属性组合起来，如下所示：

export class MyCmp implements OnInit {

      listData: Observable<List1Bulk[] | List2Bulk[]>;

      constructor(private _myService: MyService) {};

      public showList1(): void {
        this.listData = this._myService.getList1Data();
      }

      public showList2(): void {
        this.listData = this._myService.getList2Data();
      }
}

导出类MyCmp实现OnInit{
列表数据：可观察；
构造函数（私有_myService:myService）{}；
public showList1（）：void{
this.listData=this.\u myService.getList1Data（）；
}
public showList2（）：void{
this.listData=this.\u myService.getList2Data（）；
}
}

这样，您就不需要更改HTML中的任何内容