Question

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

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

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

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

错误：在需要表达式的地方进行了插值（{{}}） [{{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";
    }
}

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

感谢您的帮助。

编辑

已解决：

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

Answer 1

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

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

Answer 2

PIPE

@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

Answer 3

您需要像ngClass

那样重写 [ngClass]="{'class': true}"

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

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

Live Demo

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

3 个答案: