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

我正试图根据

管道变换形式

给出的结果，在跨度上分配一个自定义类。可悲的是，我无法让它发挥作用

下面是一个场景。我在

ngFor

语句中设置此对象：

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

在初始化时，我想根据

文档\u ext

分配一个自定义类。但这导致我出现以下错误：

错误：获取插值（{}}），其中表达式应位于 [{doc？.document_ext | documentalType}]中的第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>

我不想调用函数，这就是我选择使用

管道的原因。我错过了什么

感谢您的帮助

编辑

解决方法如下：

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


您不能使用
[ngClass]
和
{function（）}
的组合，就像
[ngClass]=“{doc？.document|ext | documentalype}”
一样，因为两者都将使其成为一个表达式，而不仅仅是解释文本

尝试使用
[ngClass]=“doc？”document|ext|documentalype”
您不能使用
[ngClass]
和
{function（）}
的组合，就像
[ngClass]=“document|ext|documentalype}
一样，因为两者都将使其成为一个表达式，而不仅仅是解释文本

尝试使用
[ngClass]=“doc？.document|ext | documentalype”
管道

@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>

这里有一个现场演示
管道

@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>

这是一个现场演示
您需要重写
ngClass像
[ngClass]=“{'class'：true}”

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

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


{{doc.document_ext}

您需要重写
ngClass像
[ngClass]=“{'class'：true}”

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

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


{{doc.document_ext}

每当您有[someProperty]=“…”时，值总是一个角度表达式，因此不能使用双大括号。不能像
[ngClass]=“{{doc？.document|ext | documentType}”中那样使用[]和{}}的组合，因为两者都将使其成为一个表达式，而不仅仅是解释文本。每次您有[someProperty]=“…”，那么该值始终是一个角度表达式，因此您不能使用双大括号。您不能像
[ngClass]=“{{{doc？.document ext|documentalType}”中那样使用[]和{}}的组合，因为两者都会使它成为一种表达，而不仅仅是解释文本。