Question

我想在ngFor中调用一个方法，并希望将返回值分配给局部变量。我尝试过这种方法：

<div *ngFor="let card of partNumberPlanningCards; let i = index" class="partnumber-basic-card">
<div 
  *ngFor="let scope of containerScopeLineItems; let lineItem = getOperatingWeightBy(scope.containerScopeId, card.typeId)">
   </div>
 </div>

但它显示此错误：

Parser Error: Unexpected token (, expected identifier, keyword, or string at column 74 in [let scope of containerScopeLineItems; let lineItem = getOperatingWeightBy(scope.containerScopeId, card.typeId)] in ng

Answer 1

您要在这里做什么？在ngFor中调用函数来更新DOM无疑是一个坏习惯。

看起来，您要基于containerScopeId和typeId进行过滤，只需执行此操作，然后将其分配给component.ts级别的变量，而不是在模板中调用函数即可。

只需声明一个变量lineItem并根据您的条件使用 array.find() 即可获得匹配的项目。

Answer 2

您可以将var menu = new List<MenuModel> { new MenuModel { MainMenu = "Home", sMenu = new List<SubMenu> {}, }, new MenuModel { MainMenu = "About" } }.ToList();返回的值存储在function的{{1}}中，并使用attribute引用来获取值。

element

此处已使用element，但您可以使用element的任何有效属性。

Answer 3

不确定是否对您有帮助。但是，请尝试一下。.您可以创建一个ng-template并使用ng-container来显示模板。

HTML：

<div *ngFor="let card of partNumberPlanningCards;" class="partnumber-basic-card">
{{card?.typeId}}
<div *ngFor="let scope of containerScopeLineItems;">
    <ng-container *ngTemplateOutlet="eng; context: getOperatingWeightBy(card.typeId, scope.containerScopeId)"></ng-container>
    {{scope?.containerScopeId}}
</div>

<ng-template #eng let-obj='value'> {{obj}} </ng-template>

TS：

export class AppComponent {

partNumberPlanningCards = [
    {typeId : 'xx'}
]

containerScopeLineItems = [
    {containerScopeId : 2}
];

getOperatingWeightBy(a,b){
    return {value:a+b};
}

}

https://stackblitz.com/edit/angular-ngfor-loop

Angular 6调用方法和将值赋给* ngFor中的变量

3 个答案: