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

问题描述

应用程序应该做什么：

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

我要选择一个选项，用户可以在使用ngModel和ngValue显示的选项之间进行选择。

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

recommended-section-name-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>

recommended-section-name-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;
    }
}

recommended-section-name-table.component.html

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

recommended-section-name-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;
        }
    }

}

recommended-section-name.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 '';
        }
    }

}

我的问题

尝试在 recommended-section-name-table.component.html 中输出<td>{{recommendedSectionName.locale?.name}}</td>时，在浏览器中没有任何结果。调试时，我可以看到它设置为undefined。我确实从<td>{{recommendedSectionName.name}}</td>得到了输出。

任何想法如何解决此问题？

解决方法

我解决了这个问题：问题不在于编写的代码...

将两个实体的推荐节名称和区域设置从ManyToMany更改为ManyToOne即可完成工作。

relationship ManyToOne {
    RecommendedSectionName{locale(name)} to Locale
}