将 NgClass 与自定义管道一起使用答案

【问题标题】：Use NgClass with a custom Pipe将 NgClass 与自定义管道一起使用
【发布时间】：2019-10-16 22:34:00
【问题描述】：

我正在尝试根据pipe trasform 给出的结果在跨度上分配自定义类。可悲的是，我没有让它工作。

这是场景。我在 ngFor 语句中迭代这个对象：

"documents": [
  {
    "document_ext": "pdf"
  } ,
  {
    "document_ext": "doc"
  }
]

在迭代时，我想根据document_ext 分配一个自定义类。但这导致我出现以下错误：

错误：得到插值 ({{}})，其中表达式应位于 [{{doc?.document_ext | 中的第 0 列]文档类型}}]

html代码：

<ng-container *ngFor="let doc of documentList">
  <div class="row">
    <div class="doc-type">
      <span class="row-icon" [ngClass]="{{doc?.document_ext | documentaleType}}"> 
      </span>
     </div>
  </div>
</ng-container>

而简单的管道现在只是返回一个标准值：

export class DocumentaleTypePipe {
    transform(ext: string): string {
        return "p3-018-dummy";
    }
}

我不想调用函数，这就是我选择使用pipe 的原因。我错过了什么？

感谢任何帮助。

编辑

这样解决：

<span class="row-icon" [ngClass]="[doc.document_ext ? (doc.document_ext | documentaleType) : 'p3-018-dummy']"></span>

【问题讨论】：

每次你有[someProperty]="..."，那么值总是一个角度表达式，因此你不能使用双花括号。
您不能像 [ngClass]="{{doc?.document_ext | documentaleType}}" 那样使用 [] 和 {{}} 的组合，因为两者都会使其成为表达式，而不仅仅是解释文本。

标签： angular

【解决方案1】：

管道

@Pipe({
  name: 'getClass'
})
export class GetClassPipe implements PipeTransform {
  transform(obj: any, args?: any): any {
    return obj['document_ext'];
  }
}

组件

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public documents = [
    {
      "document_ext": "pdf"
    },
    {
      "document_ext": "doc"
    }
  ]
}

HTML

<div *ngFor="let doc of documents" [ngClass]="doc | getClass">test</div>

CSS

.pdf {
  color:red
}

.doc {
  color:green
}

这是一个现场演示https://stackblitz.com/edit/use-ngclass-with-a-custom-pipe

【讨论】：

【解决方案2】：

您不能像[ngClass]="{{doc?.document_ext | documentaleType}}" 那样使用[ngClass] 和{{function()}} 的组合，因为两者都会使其成为表达式，而不仅仅是解释文本。

尝试使用[ngClass]="doc?.document_ext | documentaleType"。

【讨论】：

【解决方案3】：

你需要重写ngClass，比如[ngClass]="{'class': true}"

在您的代码中，您必须编写 ngClass 如下

  <span class="row-icon" [ngClass]="{'pdf-class': doc.document_ext == 'pdf'}"> 
    {{doc.document_ext}}
  </span>

Live Demo

【讨论】：