angular - Angular - 错误类型错误:无法读取未定义的属性“标题”
问题描述
我将 Laravel 端点调用到 Angular 7 中。我有两个表 smsmo 和包。smsmo 将 package_id 作为来自 package(id) 的外键。我想显示标题而不是 package_id。我在控制台中收到此错误。
有角度的
smsmot.ts
import { User } from '../models/user';
import { Telco } from '../models/telco';
import { Package } from '../models/package';
export class Smsmo {
id: number;
msisdn: string;
message: string;
short_code_called: string;
packaged_id: string;
error_message: string;
error_code: string;
telco: string;
user_id: number;
user?: User;
telcoId?: Telco;
package?: Package;
constructor() {}
}
包.ts
import { User } from '../models/user';
import { Services } from '../models/services';
export class Package {
id: number;
title: string;
descriptions: String;
price: string;
days: number;
service_id: number;
key_word: string;
welcome_message: string;
amount: string;
user?: User;
service?: Services;
constructor() {}
}
smsinbox.component.ts (smsmo)
export class SmsInboxComponent implements OnInit {
smsmos: Smsmo[];
isLoading: Boolean = false;
public searchText: string;
public filter: string;
constructor(private smsmoService: SmsmoService) { }
ngOnInit() {
// Get Bulk SMS Inbox detail
this.getSmsmos();
window.dispatchEvent(new Event('resize'));
document.body.className = 'skin-blue sidebar-mini';
}
ngOnDestroy(): void {
document.body.className = '';
}
getSmsmos(): void {
this.isLoading = true;
this.smsmoService.getSmsmos()
.subscribe(
response => this.handleResponse(response),
error => this.handleError(error));
}
}
smsinbox.component.html
<tr *ngFor="let smsmo of smsmos; let i = index">
<td>{{i + 1}}</td>
<td>{{smsmo.msisdn}}</td>
<td>{{smsmo.short_code_called}}</td>
<td>{{smsmo?.package['title']}}</td>
<td>{{smsmo.error_message}}</td>
<td>{{smsmo.error_code}}</td>
</tr>
问题在
{{smsmo?.package['title']}}
我想在 smsmo (id, package_id) 中显示 package(id, title) 中的标题而不是 package_id 我该怎么办。
除此之外,其他一切都运行良好。
解决方案
似乎包未定义为什么您会收到此错误
<td>{{smsmo?.package?.title || 'Not available' }}</td>
或者您可以使用带有 ngIf 指令的 ng-container 来检查包对象
<ng-container *ngIf="smsmo?.package; else default ">
<td>{{smsmo?.package.title}}</td>
</ng-container>
<ng-template #default>
<td> Not available </td>
</ng-template>
推荐阅读
- python - 张量和只是张量的列表
- neo4j - NEO4J 中的变量范围 - 加载 csv 文件后的 CYPHER。/这个请的替代代码
- ios - 即使在应用自动布局后 UITableView 的 contentSize 也会发生变化
- botframework - 带有 Method = "POST" 的表单不会在任务模块 MS Teams 中呈现
- javascript - 未根据 angular 中的参数获取 Http 请求。参数有问题
- vue.js - 通过 axios 更改数据后 Vue 不更新
- intellij-idea - Intellij 在运行期间删除已编译的 java 类
- android - Whatsapp 是否将我的朋友 Whatsapp 版本本地存储在我的设备数据库中?
- jsf - p:从支持 bean 插入后数据表滚动底部
- python - 无法使用 Kivy 获取窗口或文本提供程序