Как получить доступ к внешнему значению * ngFor в параметре inner value = ""? - PullRequest
Новая
       7

Как получить доступ к внешнему значению * ngFor в параметре inner value = ""?

0 голосов
/ 23 октября 2018

Это легче показать, чем объяснить.В двух словах, у меня есть тег <ul> с количеством тегов <li> внутри, и они создаются с помощью *ngFor внутри другого *ngFor.Что я хочу, чтобы этот код сделал, чтобы перечислить дни недели (например, понедельник, вторник, среда ...), а затем сопоставить их с временем суток (например, утром, полднем, днем ​​...).Достаточно просто, вот исходный код, в значительной степени полностью.

ссылка на код ниже 

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}}">

Тег «value» присваивается {{d}}, а d - из внешнего *ngFor.Если вы запустите plunker, вы увидите, что это работает как значение innerHTML <li>, но когда я пытаюсь присвоить его значение параметру "value", оно не работает.Это просто дает мне ноль.Вы можете убедиться в этом сами, запустив plunker, щелкнув правой кнопкой мыши HTML-код и выбрав «проверить».

Чтобы сэкономить время, приведен скриншот отображаемого значения.Я ожидал, что значение будет «понедельник», а не «0».

enter image description here

Есть мысли о том, как правильно отформатировать это, чтобы оно работало?

1 Ответ

0 голосов
/ 23 октября 2018

Модифицировал эту строку в коде, чтобы она работала <li *ngFor="let dt of daytimes" [attr.value]="d">{{d}}: {{ dt }}</li>.

Для привязки атрибута угловое обеспечивает [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 {}

enter image description here

...