Question

我在做什么：

html文件

 <div *ngFor='let result of results'>
    <div [ngClass]='{"myclass": someArray | inArray:result.id}'>
    </div>
    </div>

ts文件：

someArray = [1, 2, 3]

results = [
{id:1, name:'abc'},
{id:2, name:'xyz'},
{id:4, name:'pqr'}]

结果：我从来没有得到分配的课程。

如何使用“ as”将管道结果存储在html文件中，以便在ngClass中使用管道结果？

inArray（管道）：管道会根据数组中是否存在值返回true或false。

引荐Angular 2 add style based on pipe result：

更新1：

inArray（管道）：管道会根据数组中是否存在值返回-1或索引值。

更新2： stackblitz

Answer 1

pipes应该用于转换值。

尝试使用简单的功能进行检查：

inArray(value, theArray) {
   return theArray.includes(value);
}

和模板：

 <div *ngFor='let result of results'>
    <div [ngClass]='{"myclass": inArray(result, results)}'>
    </div>
 </div>

甚至没有功能：

 <div *ngFor='let result of results'>
    <div [ngClass]='{"myclass": results.includes(result)'>
    </div>
 </div>

祝你好运！

Answer 2

您可以尝试这样的操作-将类名绑定到属性绑定并使用管道

JButton.horizontalAlignment

根据将类添加到特定html的条件，您的管道将返回true或false

希望这会有所帮助-编码愉快：）

Answer 3

如果我没记错的话，这就是您要寻找的！

对不起，我不得不打理一下，现在才回来。

检查StackBlitz

仅在存在值的情况下应用该类。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'inArray' })
export class inArrayPipe implements PipeTransform {

  transform(value: any, exponent: any): boolean {
    let result = value.indexOf(exponent);
    return result > -1;
  }
}

剩下的就是你的代码了。.但是在上面的Stackblitz示例中，它们都可以一起工作。

Answer 4

您可以使用function： [ngClass] =“ isValueInArray（）” 并在该函数中返回值true / false

如何存储和使用角度管道结果在html文件中添加ngClass

4 个答案: