根据条件将 class 分配给 *ngFor 内的 div

Question

我需要根据一种方法将 class 分配给 *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 内部的方法也不会反映变化。

我需要做哪些改变？

Answer 1

不鼓励在 Angular 模板中调用 function ，因为它效率低下并且可能引发错误 - 更多关于它的信息在这篇文章中。

回到您的问题，您应该创建 Angular Pipe以满足您的需求。 在您的场景中，我们需要一个 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);
  }
}

接下来，在您的组件中，您需要使用 pipe 并传递额外的 arguments

@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];
}

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

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

您可以在此代码沙箱中试验代码