javascript-如何访问在* ngFor中定义的变量？

在我的第一个Angular 4应用程序中,我定义了一个列表组件：

<edm-document *ngFor="let document of documents" class="column is-one-quarter"></edm-document>

文件是一个接口：

export interface Document {
    id?: Number,
    name: string,
    filePath: string
}

一切都按预期工作,即我得到了我的文件清单.但是现在我想访问我的DocumentComponent(edm-document标签组件)中的document变量.

在我的DocumentComponent模板中,如果我尝试这样做,将无法正常工作：

<p>{{ document.name }}</p>

我收到此错误：DocumentComponent.html：1错误TypeError：无法读取未定义的属性“名称”.

我需要像这样强制执行文档定义,并指定文档作为输入：

<edm-document *ngFor="let document of documents" [document]="document" class="column is-one-quarter"></edm-document>

现在它可以工作,但对我来说有点多余,因为我定义了一个让入循环.这是否意味着用let定义的变量仅在设置了ngFor指令的标记中可用？

我想念什么吗？

谢谢,

尼古拉斯

解决方法:

it works but seems a bit redundant to me as I defined a let in loop

它并没有看起来那么多余,当重写一些东西时,这变得显而易见：

>如果未明确定义组件应使用的内容(在示例中为[document] =“ document”),那么您的组件如何知道父变量名为document？考虑：

<edm-document *ngFor="let d of documents" [document]="d"></edm-document>

有人可能会争辩说Angular可以引入一些父变量来访问外部循环变量,但随后组件将知道如何使用它,并且只能在循环中使用.可重用组件不应意识到这一点.
>如何知道它可以直接使用该循环变量,而不需要某些子属性？喜欢：

<edm-document *ngFor="let d of documents" [document]="d.text"></edm-document>

所以：您的代码就很好.

标签：ngfor,access,angular,variables,javascript
来源： https://codeday.me/bug/20191025/1929099.html