Question

我有以下内容：

<div *ngFor="let item of order.items">

我需要显示结果，例如：

{{item.product.category.availability.selected.name.value}}
{{item.product.category.availability.selected.id.value}}

理想情况下，我希望将这整个部分分配给模板中的变量：

let item = item.proproduct.category.availability.selected

所以我可以在整个模板中显示这样的数据（更短）：

{{item.name.value}}
{{item.id.value}}

有没有办法做到这一点？

Answer 1

解构功能在角度模板中不可用。在git hub repository

中检查问题

一种解决方案是创建一个管道以对此进行格式化。例如：

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

@Pipe({name: 'formatValues'})
export class FormatValues implements PipeTransform {

  //Destructuring in the first parameter which has the item value
  transform({ product: { category: { availability: { selected :{ name: { value } } } } } }: any, args?: any[]): string {
    return value;
  }
}

导入并在模块中声明：

import { FormatValues } from './values.pipe';


@NgModule({
  declarations: [
    AppComponent,
    FormatValues
  ],
  ...
})

最后使用管道：

<div *ngFor="let item of order.items">
   {{item | formatValues}}
</div>

如果您想防止管道，只需在组件中创建一个函数并调用它即可：

{{formatValue(item)}}

在您的ts中：

formatValue({product:{ category:{availability:{selected:{ name:{ value }}}}}}: any): string {
  return value;
}

Answer 2

您不能在Angular的模板中定义这样的速记变量。

我能想到的最接近的东西

<div *ngFor="let item of order.items">
    <ng-container *ngIf="item.product.category.availability.selected as value">
         ...
       {{value}}
         ...
    </ng-container>
</div>

但这并不是完全推荐，更多的是一种解决方法。

更“角度化”的方式是在组件代码中分解或格式化对象。

一种方法：

组件：

...
export class ComponentClass {
    ...
    getNestedProperty(nestedItem): string {
        return nestedItem.product.category.availability.selected.name.value;
    }
}
...

模板：

<div *ngFor="let item of order.items">
...
{{getNestedProperty(item)}}
...
</div>

其他人建议创建一个子组件，这似乎也是一个好主意。

https://angular.io/guide/styleguide#put-presentation-logic-in-the-component-class

Answer 3

<div *ngFor="let item of order?.items?.product?.category?.availability?.selected
">

你可以这样写

现在您可以访问

角度ngFor变量分配

3 个答案: