如何在内部 value="" 参数中访问外部 *ngFor 值？

Question

这比解释更容易展示。简而言之，我有一个<ul> 标签，其中包含许多<li> 标签，这些标签是通过在另一个*ngFor 中使用*ngFor 创建的。我想要这段代码做的是列出一周中的几天（例如星期一，星期二，星期三......），然后将它们与一天中的时间（例如早上，中午，下午......）连接起来。很简单，这里是源代码，几乎是完整的。

link to code below

import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
    selector: 'my-app',
    template: `
        <ul *ngFor="let d of days">{{ d }}
            <li *ngFor="let dt of daytimes" value="{{d}}">{{d}}: {{ dt }}</li>
        </ul>
    `,
})
export class App {
    days = [
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
        'Sunday',
    ];

    daytimes = ['Morning', 'Noon', 'Afternoon', 'Evening', 'Night'];
}

@NgModule({
    imports: [BrowserModule],
    declarations: [App],
    bootstrap: [App],
})
export class AppModule {}

好的，问题来了。看这一行：

<li *ngFor="let dt of daytimes" value="{{d}}">

“值”标签被分配给{{d}}，d 来自外部*ngFor。如果您运行 plunker，您会看到它作为 <li> 的 innerHTML 值起作用，但是当我尝试将其值分配给“值”参数时，它不起作用。它只是给了我一个零。您可以通过运行 plunker 自己查看这一点，然后右键单击 HTML 并选择“检查”。

为了给大家节省一些时间，这里是显示值的截图。我预计该值为“星期一”，而不是“0”。

关于如何正确格式化以使其正常工作的任何想法？

Answer 1

修改了代码中的这一行以使其工作<li *ngFor="let dt of daytimes" [attr.value]="d">{{d}}: {{ dt }}</li>。

对于属性绑定，angular提供[attr.<attribute-name>]

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
    selector: 'my-app',
    template: `
        <ul *ngFor="let d of days">{{ d }}
            <li *ngFor="let dt of daytimes" [attr.value]="d">{{d}}: {{ dt }}</li>
        </ul>
    `,
})
export class App {
    days = [
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
        'Sunday',
    ];

    daytimes = ['Morning', 'Noon', 'Afternoon', 'Evening', 'Night'];
}

@NgModule({
    imports: [BrowserModule],
    declarations: [App],
    bootstrap: [App],
})
export class AppModule {}