使用 *ngFor 创建条件

Question

我与 API 媒体有联系。有时，有些对象是空的，我不知道如何排除它们。

html

<div class="container-fluid" style="background-color: #212529; width: 100%;">
<div class="box" >
<div class="list-group-item" id="blc" *ngFor="let media of medias">
  <h6><a href={{media.url}} >{{media.title}}</a></h6>
  <img class="responsive" width="600" height="400" [src]="media.urlToImage">
  <p><small>{{media.description}}</small></p>
</div>
</div>
</div>

ts

export class MediaComponent implements OnInit {
public medias = [];

constructor(public mediaService: MediaService,
private route: ActivatedRoute) { }

ngOnInit(): void {
this.route.queryParams.subscribe((params: {page?: string}) => {
this.mediaService.index(params).subscribe((res: {articles}) => {
console.log(res.articles)
this.medias = res.articles;
});
});
}
}

我想要这样的东西：

<div class="container-fluid" style="background-color: #212529; width: 100%;">
****<div class="box" *ngIf ="media.title && media.description && media.urlToImage">****
<div class="list-group-item" id="blc" *ngFor="let media of medias">
  <h6><a href={{media.url}} >{{media.title}}</a></h6>
  <img class="responsive" width="600" height="400" [src]="media.urlToImage">
  <p><small>{{media.description}}</small></p>
</div>
</div>
</div>

Answer 1

正如您提到的，api 有时会返回空对象，您可以检查各个字段并仅显示具有值的字段。

<div class="container-fluid" style="background-color: #212529; width: 100%;">
  <div class="box" >
    <div class="list-group-item" id="blc" *ngFor="let media of medias">
        <h6 *ngIf="media.url && media.title"><a href={{media.url}} >{{media.title}}</a></h6>
        <img class="responsive" width="600" height="400" *ngIf="media.urlToImage" [src]="media.urlToImage">
        <p *ngIf="media.description"><small>{{media.description}}</small></p>
    </div>
  </div>
</div>

或者，如果您不想显示整个 div，如果缺少任何字段，您可能想要使用：

<div class="container-fluid" style="background-color: #212529; width: 100%;">
    <div class="box" >
        <div class="list-group-item" id="blc" *ngFor="let media of medias">
            <div *ngIf="media.title && media.url && media.urlToImage && media.description">
            <h6><a href={{media.url}} >{{media.title}}</a></h6>
            <img class="responsive" width="600" height="400" [src]="media.urlToImage">
            <p><small>{{media.description}}</small></p>
        </div>
     </div>
</div>

您还可以使用 rxjs 管道过滤您的数组，仅针对那些具有必需字段的值并循环它们，这样您就不必在 DOM 中使用多个条件，并且可以相应地循环数组。

this.mediaService.index(params).pipe(filter(media => media.title && media.url && media.urlToImage && media.description )).subscribe((res: {articles}) => {
console.log(res.articles)
this.medias = res.articles;
});

Answer 2

最简单的方法是在组件中做这样的事情，

this.medias = res.articles.filter(Boolean); // 将删除 null 或未定义的值

或

this.medias = res.articles.filter(x => x.title && x.description && x.urlToImage);// 将过滤掉集合中不具备所有三个属性的任何对象

但是，如果你坚持在模板上做，你可以这样做。

<div class="list-group-item" id="blc" *ngFor="let media of medias">
  <div *ngIf ="media.title && media.description && media.urlToImage"> 
      <--more content -->
  </div>
</div>