在 Angular 中显示全部和隐藏列表项答案

【问题标题】：Show All and Hide list items in Angular在 Angular 中显示全部和隐藏列表项
【发布时间】：2021-04-22 23:29:36
【问题描述】：

我有一个从 API 获得的项目列表，我想制作一个显示全部和隐藏来源的列表

这就是我想要的

.html代码

   <div class="group">
<p class="header">Sources (channel)</p>
<ul class="filter-list">
  <li *ngFor="let source of sourcesList">{{ source.sourceName }}<ion-checkbox class="checkbox" ></ion-checkbox></li>
</ul>
<div *ngIf="N > 3">
  <p class="more" *ngIf="is_shown" (click)="swap()">Hide sources</p>
  <p class="more" *ngIf="!is_shown" (click)="swap()">Show all sources</p>
</div>

这是我的 .ts 代码

   @IonicPage()
@Component({
  selector: 'page-my-opportunities-filter',
  templateUrl: 'my-opportunities-filter.html',
})

export class MyOpportunitiesFilterPage {
  public results = [];
  sourcesList =[];
  private is_shown: boolean = true;
  private N: number;

  constructor(public navCtrl: NavController, 
    private viewCtrl: ViewController,
    public navParams: NavParams,
    public globalService: GlobalServiceProvider,
    public dataService: DataServiceProvider,
    ) {
  }

  public swap():void {
if (this.is_shown) {
  if (this.N > 3) {
    //show hide sources that will only show 3 list item
  } else {
    //show all data 
  }
} else {
  //show all data 
}
this.is_shown = !this.is_shown;}

  private ionViewWillLoad(): void { 
  }

  private cancel(): void {
    this.viewCtrl.dismiss(null);
  }
  
  private show(): void {
    this.viewCtrl.dismiss(this.metaData);
  }

  private ionViewDidLoad(): void {
    this.globalService.showLoader();
    this.getAllSources();
    
    this.globalService.dismissLoader();
  }
    
 
  getAllSources(){
    this.dataService.getSources('mytokenAPI')
    .subscribe((results) =>  {
      this.sourcesList = results;
      console.log('JSON Response = ', JSON.stringify(results));
    })
  }

}

我很困惑如何使它工作，在这段代码中我只是给出逻辑，当我只显示所有项目值时它运行良好，但我想显示全部并隐藏列表，我仍然困惑如何以角度制作它，我是角度的新手，也许你可以帮助我如何解决我的问题, 这意味着很多

【问题讨论】：

标签： html angular ionic-framework frontend

【解决方案1】：

创建一个getter 函数

get getSourcesList(){
 return this.is_shown? this.sourcesList ? this.sourcesList.slice(0,3)
}

并遍历 getter 函数

<ul class="filter-list">
  <li *ngFor="let source of getSourcesList">
    {{ source.sourceName }}<ion-checkbox class="checkbox" ></ion-checkbox>
  </li>
</ul>

【讨论】：

【解决方案2】：

你可以做这样的事情。在 HTML 上使用数组功能将减少 component.ts 文件中的代码。

<div class="group">
   <p class="header">Sources (channel)</p>
   <ul class="filter-list">

      <ng-container *ngIf="sourceList && (sourceList.length < 4)">
        <li *ngFor="let source of sourcesList">
          {{ source.sourceName }}
          <ion-checkbox class="checkbox" ></ion-checkbox>
        </li>
       </ng-container>
       
      <ng-container *ngIf="sourceList && (sourceList.length > 3) && is_shown">  
        <p (click)="is_shown = !is_shown"> 
            {{ is_shown ? 'Hide ' : 'Show all ' }} sources 
        </p>

        <li *ngFor="let source of sourcesList">
          {{ source.sourceName }}
          <ion-checkbox class="checkbox" ></ion-checkbox>
        </li>
       </ng-container>
   </ul>

【讨论】：