Как представить 2 типа json в одном и том же виде по одному на основе нажатия кнопки

Question

Как представить 2 типа json в одном и том же виде по одному на основе нажатия кнопки

0

У меня есть вид с двумя кнопками: List 1 & List 2

в моем html У меня есть действие, когда кто-то нажимает на List 1 im, приводя json для List 1 и представляя его, и у меня есть действие, которое, когда я нажимаю на List 2 получаю json для list 2,

но я не знаю, как представить его в другой структуре, а затем список, который возвращается для List 1... что было бы лучшим решением для печати 2-х разных функций 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();
  }
}

и это мой компонент. 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>

Как я могу изменить свое представление, чтобы я мог представить также list2data? я хочу нажать кнопку "Список 2", очистить данные списка 1 и представить данные списка 2.

благодарю!

jack miao 25 июль 2016, в 12:22

Источник

Теги:

angular

html

angularjs

json

html5

2 ответа

1

Вы могли бы просто объединить два свойства следующим образом:

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();
      }
}

Таким образом, вам не нужно ничего менять в своем HTML.

Filip Lauc 25 июль 2016, в 08:43

Ещё вопросы

Harry Ninh · Accepted Answer · 2016-07-25T08-07-00.000Z

Для этого используйте *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>