ионный 4 заполнить список с нажатием кнопки

Question

У меня есть страница, которая генерирует список из массива.Я получил этот пример из сети.Который показывает ключ вывода HTML-кода один и ключ 2. (1) Я хотел бы изменить код для вывода только ключ один.Как я могу изменить код, чтобы сделать это?(2) Если я хочу использовать нажатие кнопки, чтобы вывести только один или два, как я могу это сделать?Вот код:

messages = [{
    'One' : [
    {'id' : 1},
    {'id' : 2},
    ],
   'Two' : [
    {'id' : 1},
    {'id' : 2},
   ]
 }] ;


 @Component({
 ...
 })
 export class YourComponent{
 objectKeys: any = Object.keys;
 messages: Array<any>;

 out(key){

 }
 constructor(){}

 ...
 }


HTML:
<ion-button (click)="out('one')">button 1 </ion-button>
<ion-button (click)="out('two')">button 2 </ion-button>


<div *ngFor="let message of messages">
  <div *ngFor="let key of objectKeys(message)">
    <div>KEY: {{ key }}</div>
    <div *ngFor="let val of message[key]">{{ val.id }}</div>
</div>

OUTPUT:
 KEY: One
      1
      2
 KEY: Two
      1
      2

Answer 1

Я придумаю решение (1) и (2), используя ng-if и ng-model. Вот код:

  html :
  <ion-button (click)="out('one')">button 1 </ion-button>
  <ion-button (click)="out('two')">button 2 </ion-button>

  <ion-input type="hidden" [(ngModel)] ='nameFilter' ></ion-input>
  <div *ngFor="let message of messages"> 
  <div *ngFor="let key of objectKeys(message)">
     <div *ngIf="key==nameFilter ">
        <div>KEY: {{ key }}</div>
        <div *ngFor="let val of message[key]">{{ val.id }}</div>
    </div>
  </div>
</div>

ts code :

 @Component({
 ...
 })
 export class YourComponent{
 objectKeys: any = Object.keys;
 messages: Array<any>;
 nameFilter: String = 'one';

 out(key){
   if (key == 'one') {
      nameFilter = 'one';
   }
   else {
      nameFilter = 'two';
   }
 }
 constructor(){}

 ...
 }

Answer 2

Я нашел решение для (1), используя ngIf в HTML-коде.Вот рабочий код:

<div *ngFor="let message of messages"> 
   <div *ngFor="let key of objectKeys(message)">
   <div *ngIf="key=='One' ">
       <div>KEY: {{ key }}</div>
       <div *ngFor="let val of message[key]">{{ val.id }}</div>
   </div>
   </div>
</div>