如何更改位于 ngFor 中的块的外观？

小编典典

如何更改位于 ngFor 中的块的外观？

all

我有一个文章地图组件。在其中，在 ngFor 指令的帮助下，我显示了有关文章的简要信息。我在“feed”组件中调用了“article-map”组件。“提要”组件应该具有三个具有不同“文章地图”样式的视图。例如：第一个是工作表，第二个是两列，等等。如何使用 ngClass 为不同的提要视图设置文章地图组件的样式？

我从以下开始。在 article-card.component.ts 中，我设置了一个变量以从链接中获取参数。

export class ArticleCardComponent implements OnInit {
  constructor(private route: ActivatedRoute) { }
  typeView='default';

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      console.log(params)
      this.typeView=params['viewType'];
    })
  }
}

现在我想为 ngClass 编写一个三元表达式，它允许将不同的样式类用于提要视图。告诉我怎么做？

阅读 72

2022-08-21

共1个答案

小编典典

在你的情况下，它会。

<div [ngClass]="typeView ===  'default' ? 'css-class-1' : 'css-class-2'">

如果您想要多个条件，请编写如下函数

html

<div [ngClass]="getClass()">

getClass() {
    switch(this.typeView) {
        case 'default':
            return 'css-class-1';
        case 'special':
            return 'css-class-2';
        default:
            return 'css-class';
    }
}

2022-08-21