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

Question

What the Application should do:

I'm working on a Web-Application using JHipster and Angular 4.

I want to make a select option where the user can choose between options displayed using ngModel and ngValue.

The chosen value should then be displayed in another HTML file. The shown values are from another entity.

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 '';
        }
    }

}

My Problem

When trying to output <td>{{recommendedSectionName.locale?.name}}</td> in recommended-section-name-table.component.html I do not get any result in the browser. When debugging I can see it is set to undefined. I do get an output from <td>{{recommendedSectionName.name}}</td> though.

Any Idea how to fix this?

Answer 1

I fixed the issue: The problem was not the written code...

Changing the relationship between the two entities Recommended Section Name and Locale from ManyToMany to ManyToOne did the job.

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