Question

在Angular中，我们可以通过以下方式使用 * ngFor ：

<li *ngFor="let hero of heroes">
  {{ hero }}
</li>

但是Angular如何定义范围变量 hero 并且我能够实现同一件事吗？我只对范围变量感兴趣，而不对循环部分感兴趣。

Answer 1

component.ts中定义的所有公共变量（函数）都可以从component.html访问，并且可以使用interpolation and template expresion来显示

拥有* ngFor时，定义“让数组变量”时，变量可以在内部内访问，并且是数组的每个元素

如果要声明变量，请使用ng-if-let，例如

<div *ngIf="'hello word' as greeting">
  {{greeting}}
</div>

Answer 2

好的，我能够解决我的问题。我没有意识到自己可以使用以下语法：

*ngFor="let test...."

由此，我能够创建以下指令：

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appWrapper]',
})
export class WrapperDirective {
  constructor(viewContainer: ViewContainerRef, template: TemplateRef<any>) {
    viewContainer.createEmbeddedView(
      template,
      { ['$implicit']: 'Max Mustermann' },
      0,
    );
  }
}

此指令现在可以像这样使用：

<div *appWrapper="let name">{{ name }}</div>

是否有办法摆脱 let name 部分？

This Stackoverflow post helped me to implement my idea

作用域变量的实现在* ngFor中如何工作

2 个答案: