使用NgClass与自定义Pipe

Question

我正在尝试根据pipe transform的结果，在标签上分配一个自定义类。不幸的是，我无法使其工作。

以下是场景。我正在使用ngFor语句迭代此对象：

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

在循环过程中，我想根据document_ext分配一个自定义类。但这会导致以下错误：

错误：在表达式所在的第0列处得到插值({{})}，而预期的是表达式[{{doc？.document_ext | documentaleType}}]

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";
    }
} 

我不想调用函数，所以我选择使用"管道"。我错过了什么吗？

感激任何帮助。

编辑

这样解决：

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

- Jacopo Sciampi

---

每当你有 [someProperty]="..."，那么该值总是一个 Angular 表达式，因此不要使用双花括号。 - undefined

在[ngClass]="{{doc?.document_ext | documentaleType}}"中，你不能同时使用[]和{{}}的组合，因为这样会将其变成一个表达式，而不仅仅是解释文本。 - undefined

Answer 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。

- maxime1992

Answer 2

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

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

- Korfoo

Answer 3

你需要像这样重写 ngClass： [ngClass]="{'class': true}" 在你的代码中，你必须按照以下方式编写 ngClass。

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

实时演示

- ram12393