如何在内部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。如果运行插件，您将看到它可以作为<li>的innerHTML值来使用，但是当我尝试将其值分配给“值”参数时，它将无法使用。它只是给我零。您可以通过运行插入器，然后右键单击HTML并选择“检查”来亲自查看。

为了节省大家一些时间，下面是显示值的屏幕截图。我希望该值为“星期一”，而不是“ 0”。

是否有任何关于如何正确格式化以使其起作用的想法？