如何解决使用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
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。