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

Question

应用程序应该做什么：

我正在使用 JHipster 和 Angular 4.

开发 Web 应用程序

我想制作一个 select 选项，用户可以在其中选择使用 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;
        }
    }

}

推荐部分-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> 时，我在浏览器中没有得到任何结果。调试时我可以看到它设置为未定义。不过，我确实从 <td>{{recommendedSectionName.name}}</td> 得到了输出。

知道如何解决这个问题吗？

Answer 1

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

将推荐的部分名称和区域设置这两个实体之间的关系从 ManyToMany 更改为 ManyToOne 完成了这项工作。

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

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

Getting undefined value when using ngModel and ngValue Angular 4 and JHipster

angular

typescript

jhipster

angular2-forms

ng-modules

应用程序应该做什么：

我的问题