javascript - 使用 ng-template 在 Angular 10 中仅显示博客中的相关条目

Question

我有一个用 Strapi 制作的博客后端，您可以在其中添加一些内容类型，例如标题字段、描述字段和内容字段。我还有一个 bool 内容类型来设置博客是否相关。我在 Angular 中设置了一个 ngFor 来显示我所有的博客条目；但我只想展示相关的。实际上，我正在使用 ngIf 指令显示相关条目，但 Angular 为不相关的条目留了一些空白。有什么办法可以去除这些空白？？我想这一定是 ng-template 的问题。

这是我的 html，我在其中设置了 ngFor:

<div class="col-md-6 col-xs-12" *ngFor="let data of datas; index as i"accesskey="">                                                    
    <div class="banner-wrapper" *ngIf='data?.relevante==True; else relevante'>
        <ng-template #myrelevante></ng-template>
        <a [routerLink]="['/pagina',data.id]" title="Leveling up in CSS">
            <div class="banner-wrapper-content">
                <h1 class="h2">{{ data.title }}</h1>
                <!-- <span class="category-tag category-tag-white"></span> -->
                <h3 class="mylittle">{{ data.description }}</h3>
                <time datetime="2016-01-18" class="">{{ data.fecha | date:'dd/MM/yyyy' }}</time>
            </div>
        </a>
        <img class="img-fluid"
                 src="http://localhost:1337{{ data.image.url }}"
                 alt="foto"
                 width="100%" 
                 data-rjs="2"
        />
    </div>
</div>

而且，这是一张显示非相关博客条目的空白区域的图像:

我也分享了我的 ts 文件:

import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { StrapiService } from '../../../services/strapi.service';

import { Router } from '@angular/router';


@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {

  datas:any=[];
  errores:string="";
  totalLength:any;
  page:number = 1;

  constructor(
    private title: Title,
    private meta: Meta,
    public strapiserv:StrapiService,
    private router: Router
  ) { }

  ngOnInit(): void {

    this.title.setTitle('Blog');
    this.meta.updateTag({ 
      name: 'description', 
      content: 'Publicaciones más relevantes del mundo cloud, transformación digital y el mundo empresarial' 
    })
    this.meta.updateTag({
      name: 'keywords',
      content: 'Transformacion digital, Cloud, La nube, GCP, trabajo remoto, eSource capital, migración de datos, CSS, 2021, Navent, Google Cloud, Microsoft, Ciberseguridad'
    })


    this.strapiserv.getData().subscribe(res=>{

        this.datas= res as string[];

        this.totalLength = res.length;

    }, error =>{
      console.log(error);
        if(error.status == 0){
            this.errores="Código del error: "+error.status+" \n Ha ocurrido un error del lado del cliente o un error de red.";
        }else{
            this.errores="Código del error: "+error.status+"\n\n"+error.statusText;
        }
    })  


  }


  filterRelevante(datas: Data[]) : Data[] {
      return datas.filter(data => data.relevante)
  }


}

Answer 1

您可以编写一个函数来获取您的数据数组并将其过滤后返回。

在你的 .ts 中:

filterRelevante(datas: Data[]) : Data[] {
    return datas.filter(data => data.relevante)
}

然后您只需使用该函数将“数据”包装在您的模板中。

在您的 html 中:

<div 
    class="col-md-6 col-xs-12"
    *ngFor="let data of filterRelevante(datas); index as i"accesskey="">

我只是假设您的数据类型为数据，但事实可能并非如此。这也是一个糟糕的名字，但我喜欢用 typescript 输入东西，所以我建议为你的数据编写你自己的接口(interface)并正确命名，而不是只使用任何。