Objective of the Application:
I am currently developing a Web-Application using JHipster and Angular 4.
My goal is to create a select option where users can choose from displayed options using ngModel and ngValue.
Once a value is chosen, it should be shown in another HTML file. The displayed values are fetched 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 '';
}
}
}
Challenge Faced
When attempting to display
<td>{{recommendedSectionName.locale?.name}}</td><td>{{recommendedSectionName.name}}</td>Any suggestions on how to resolve this issue?