angular - 使用 ngModel 和 ngValue Angular 4 和 JHipster 时获取未定义的值

问题描述

应用程序应该做什么：

我正在使用 JHipster 和 Angular 4 开发 Web 应用程序。

我想创建一个选择选项，用户可以在其中选择使用 ngModel 和 ngValue 显示的选项。

然后，所选值应显示在另一个 HTML 文件中。显示的值来自另一个实体。

推荐部分名称dialog.component.html

<select class="form-control" id="field_locale"  name="locale" [(ngModel)]="recommendedSectionName.locale" required>
                <option [ngValue]="null"></option>
                <option
                    [ngValue]="localeOption.id === recommendedSectionName.locale?.id ? recommendedSectionName.locale : localeOption"
                    *ngFor="let localeOption of locales; trackBy: trackLocaleById">
                    {{localeOption.getName()}}
                </option>
            </select>

推荐部分名称dialog.component.ts

import { Locale, LocaleService } from '../locale';

@Component({
    selector: 'jhi-recommended-section-name-dialog',
    templateUrl: './recommended-section-name-dialog.component.html'
})
export class RecommendedSectionNameDialogComponent implements OnInit {


    locales: Locale[];


    _recommendedSectionName: RecommendedSectionName;

    constructor(

        private recommendedSectionNameService: RecommendedSectionNameService,
   
    ) {
    }

    get recommendedSectionName(): RecommendedSectionName {
        return this._recommendedSectionName;
    }

    set recommendedSectionName(value: RecommendedSectionName) {
        this._recommendedSectionName = value;
    }

    ngOnInit() {

        if (!this.recommendedSectionName) {
            this.recommendedSectionName = new RecommendedSectionName();
        }

        this.localeService.query()
            .subscribe((res: ResponseWrapper) => { this.locales = res.json; }, (res: ResponseWrapper) => this.onError(res.json));

    }

    trackLocaleById(index: number, item: Locale) {
        return item.id;
    }
}

推荐的部分名称-table.component.html

<tr *ngFor="let recommendedSectionName of rsdata ;trackBy: trackId">
            <td>{{recommendedSectionName.name}}</td>
            <td>{{recommendedSectionName.locale?.name}}</td>
</tr>

推荐的部分名称-table.component.ts

@Component({
    selector: 'jhi-recommended-section-name-table',
    templateUrl: './recommended-section-name-table.component.html'
})
export class RecommendedSectionNameTableComponent {

    @Input() rsdata: RecommendedSectionName[];


    trackId(index: number, item: RecommendedSectionName) {
        if (item) {
            return item.id;
        } else {
            return null;
        }
    }

}

推荐部分名称.model.ts

import { BaseEntity } from './../../shared';
import {Locale} from "../locale";


export class RecommendedSectionName implements BaseEntity {
    constructor(
        public id?: number,
        public name?: string,
        public locale?: BaseEntity,
    ) {


    }
}

locale.model.ts

import {BaseEntity} from './../../shared';
import {Country} from '../country';
import {Language} from '../language';

export class Locale implements BaseEntity {

    public country?: Country;
    public language?: Language;
    public deleted?: boolean;

    constructor(public id?: number,
                country?: Country,
                language?: Language,
                public sponsoredProducts?: BaseEntity[]) {
        this.language = language;
        this.country = country;
        this.deleted = false;
    }

    public getName() {
        if (this.country && this.language) {
            return `${this.language.code}-${this.country.code}`;
        } else {
            return '';
        }
    }

}

我的问题

尝试<td>{{recommendedSectionName.locale?.name}}</td>在推荐的部分名称表.component.html中输出时，我在浏览器中没有得到任何结果。调试时我可以看到它设置为未定义。我确实得到了输出<td>{{recommendedSectionName.name}}</td>。

任何想法如何解决这个问题？

标签： angulartypescriptjhipsterangular2-formsng-modules

angular - 使用 ngModel 和 ngValue Angular 4 和 JHipster 时获取未定义的值

问题描述

应用程序应该做什么：

我的问题

解决方案

推荐阅读