错误类型错误：无法读取 TenantsDetailsComponent_Template

编程问答 2022-05-31

问题描述

我在加载组件时遇到此错误

typeError: 无法读取未定义的属性 'street1' 在 TenantsDetailsComponent_Template (tenants-details.component.html:92)

component.ts

我在这里定义了我的对象

tenantDataFromListComp : TenantInfoResponse = { };

TenantInfoResponse 接口具有类似地址接口类型的属性

import { Address } from './address';
import { CommunicationSettings } from './communicationSettings';
import { ContactData } from './contactData';
import { CurrencyPreferenceEntry } from './currencyPreferenceEntry';
import { DmsSettings } from './dmsSettings';
import { DocumentStatus } from './documentStatus';
import { RepairOrderSettings } from './repairOrderSettings';


export interface TenantInfoResponse { 
address?: Address;
communicationSettings?: CommunicationSettings;
contactData?: ContactData;
currencyPreferences?: Array<CurrencyPreferenceEntry>;
defaultLocale?: string;
defaultTimezone?: string;
director?: string;
displayName?: string;
dmsSettings?: DmsSettings;
emailOnStatusChangedList?: Array<DocumentStatus>;
forwardEmailAddress?: string;
fullName?: string;
legalEntityName?: string;
paymentLinkValidity?: number;
recipientDataLearning?: boolean;
registeredSeat?: string;
registration?: string;
reminderInterval?: number;
repairOrderSettings?: RepairOrderSettings;
returnEmailAddress?: string;
style?: TenantInfoResponse.StyleEnum;
surveyScript?: string;
tenantCode?: string;
tenantCodeExternal?: string;
vatCode?: string;
  }

和地址界面就像

export interface Address { 
city?: string;
country?: Address.CountryEnum;
postcode?: string;
province?: string;
street1?: string;
street2?: string;
}

component.html

   <div class="card shadow p-0 mb-2 bg-white rounded">
                    <div class="card-header  text-white bg-dark"> Tenant Address</div>
                    <div class="card-body">
                        <div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="street1">Street 1</label>
                                    <input type="text"  class="form-control"
                                        id="street1" name="street1" [(ngModel)]="tenantDataFromListComp.address.street1" >
            
                                </div>
                                <div class="form-group col-md-6">
                                    <label>Street 2</label>
                                    <input type="text" class="form-control"
                                        name="Street2" [(ngModel)]="tenantDataFromListComp.address.street2">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label>Post Code</label>
                                    <input type="text" class="form-control" name="PostCode"
                                    [(ngModel)]="tenantDataFromListComp.address.postcode">
                                </div>
                                <div class="form-group col-md-4">
                                    <label>City</label>
                                    <input type="text" class="form-control" name="city"
                                    [(ngModel)]="tenantDataFromListComp.address.city">
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Province</label>
                                    <input type="text" class="form-control" name="province"
                                    [(ngModel)]="tenantDataFromListComp.address.province">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label>Country</label>
                                    <input type="text" class="form-control" name="country"
                                    [(ngModel)]="tenantDataFromListComp.address.country">
                                </div>
                            </div>
                          

                    
                        </div>
                    </div>


                </div>

解决方法

有更好的方法来检查您的对象上是否存在该属性

%{reset_color}

这是一种避免 HTML 模板中出现此类错误的简单方法。但是，您可以添加 *ngIf 来检查值是否存在，但如果您有更多的字段需要验证，这会变得更加复杂。

,

简单方法：

发生这种情况是因为当您的 HTML 文件呈现时，您的 tenantDataFromListComp 变量是 {} 并且很明显 {} 没有 address 和 street1。 有很多方法可以解决这个问题。我一直使用的其中一个方法是将 ngIf 添加到父元素或自身。在你的情况下是这样的：

<div class="form-group col-md-6" *ngIf="tenantDataFromListComp.address && tenantDataFromListComp.address.street1">
    <label for="street1">Street 1</label>
    <input type="text"  class="form-control" id="street1" name="street1" [(ngModel)]="tenantDataFromListComp.address.street1" >
</div>

更好的方法：

停止渲染，直到来自后端的请求得到响应。 你可以在 async/await 中使用 promise

await this.http.post(...).toPromise(value => {
  ...
});

您应该在 ngOnInit 或类似的地方获取数据。 有关更多信息，您可以结帐：

,

您可以定义新对象以包含地址对象为空的地址

 tenantDataFromListComp : TenantInfoResponse = { address: {} };

抛出错误是因为 tenantDataFromListComp.address 在 {} 中未定义

angularangularangular-ngmodeltypescripttypescripttypescript