ionic 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

我通过在 html 代码中使用 ngIf 找到了 (1) 的解决方案。这是工作代码：

<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>

Answer 2

我通过使用 ng-if 和 ng-model 提出了解决方案 (1) & (2) 这是代码：

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

 ...
 }

ionic 4 用按钮点击填充列表

ionic 4 populate list with button click

html

angularjs

ionic4