Angular - 错误类型错误：无法读取未定义的属性“标题”答案

【问题标题】：Angular - ERROR TypeError: Cannot read property 'title' of undefinedAngular - 错误类型错误：无法读取未定义的属性“标题”
【发布时间】：2019-11-04 08:11:18
【问题描述】：

我将 Laravel 端点调用到 Angular 7 中。我有两个表 smsmo 和包。 smsmo 将 package_id 作为来自 package(id) 的外键。我想显示标题而不是 package_id。我在控制台中收到此错误。

角度

smsmo.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() {}
}

package.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']}}

我想显示来自 package(id, title) 的标题，而不是 smsmo (id, package_id) 中的 package_id 我该怎么办。

除此之外，其他一切都运行良好。

【问题讨论】：

你从端点的数据中得到title吗？
当我使用 smsmo.package_id 而不是 sms.package['title'] 时，我得到了数据
package_id 和 package 是两个不同的变量。确保您定义了package 并且title 在那里。我建议控制台日志package 并在问题中发布日志。

标签： angular laravel

【解决方案1】：

看来这个包是未定义的，为什么你会得到这个错误

 <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>

【讨论】：