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

Question

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

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

但是Angular如何定义作用域变量hero 我能实现同样的事情吗？我只对作用域变量感兴趣，对循环部分不感兴趣。

Answer 1

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

显示

当你有一个 *ngFor 时，当你定义 "let variable of array" 时，变量是可访问的在 *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 部分？

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

How does the implementation of a scoped variable work in *ngFor

javascript

scope

angular-directive

angular2-directives

angular