根据条件将类分配给 *ngFor 内的 div答案

【问题标题】：Assign a class to a div inside *ngFor based on condition根据条件将类分配给 *ngFor 内的 div
【发布时间】：2021-03-06 19:48:31
【问题描述】：

我需要根据方法将一个类分配给 *ngFor 迭代内的 div。

下面是我的 HTML 代码：-

<ng-container *ngFor="let data of totalData let j = index">
          <div>
            <a (click)="selectData(data)">
              <div [ngClass]="{selected : selectedCodeMethod(data)}">
                {{data.code}}
              </div>
            </a>
          </div>
        </ng-container>

我的 Ts 代码：-

selectedCodeMethod(data){
   if(this.selectedCode.includes(data.code)){
             return true;
     }
             return false;
}

selectData(data){
    this.selectedCode.push(data.code);
}

即使 selectedCodeMethod() 改变了 selectedCode 数组的内容，ngClass 内部的方法也不会反映变化。

我需要做哪些改变？

【问题讨论】：

[class.selected]=" selectedCodeMethod(data)" 有什么不同吗？
@manish sharma 不知道为什么它不适合你。这是一个具有相同设置的代码框（从 Tai 借来的）-codesandbox.io/s/bold-pond-c35rw 可以工作。
@Antoniossss 我正在执行与提问者相同的代码。也推送项目，但它仍然有效，这就是我删除答案的原因。
正确，已删除。
@Antoniossss 我尝试了 [class.selected] 并且它有效，但是正如 Tal Ohana 提到的不要在 Angular 模板中调用函数，我使用管道来解决我的问题。

标签： angular typescript

【解决方案1】：

不鼓励在 Angular 模板中调用函数，因为它效率低下并且会引发错误 - more about it in this article。

回到您的问题，您应该创建 Angular Pipe 以满足您的需求。在您的场景中，我们需要一个接受array 和element 并返回array.includes(element); 的管道：

@Pipe({
  name: "includes"
})
export class IncludesPipe implements PipeTransform {
  transform<T>(array: T[], element: T): boolean {
    return array.includes(element);
  }
}

接下来，在您的组件中，您需要使用管道并传递其他参数

@Component({
  selector: "app-root",
  template: `
    <ul>
      <li
        *ngFor="let item of items"
        [ngClass]="{ selected: selectedItems | includes: item }"
      >
        Item {{ item }}
      </li>
    </ul>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  items = [1, 2, 3, 4, 5];
  selectedItems = [1, 3];
}

最后，管道是纯的，这意味着您需要进行不可变的更新：

selectData(data){
    this.selectedCode = [ ...this.selectedCode, data.code ];
}

您可以尝试this Code Sandbox中的代码

【讨论】：

实际上这也不起作用如果 OP 代码作为更改检测不会拾取新的数组内容并且不会重新评估管道。换句话说 - 这仅适用于初始交互。 OP 必须至少重新分配selectedItems。删除的答案更准确，因为变更检测是这里的罪魁祸首。
@Antoniossss 你是对的，我会更新我的答案以匹配