错误类型错误:无法读取 TenantsDetailsComponent_Template 中未定义的属性“street1”
我在组件加载 T 时遇到此错误
typeError: Cannot read property 'street1' of undefined at TenantsDetailsComponent_Template (tenants-details.component.html:92)
component.ts
我在这里定义了我的对象
tenantDataFromListComp : TenantInfoResponse = { };
TenantInfoResponse 接口 具有 Address 接口类型的属性,如
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;
}
并且 Address 接口 就像
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>
有一种更好的方法来检查该属性是否存在于您的对象上
<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"
add '?'for the properties which might be empty---> [(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>
这是一种避免 HTML 模板中出现此类错误的简单方法。但是,您可以添加 *ngIf 来检查值是否存在,但如果您需要验证的字段更多,这会变得更加复杂。
您可以定义一个新对象来包含一个空地址对象
tenantDataFromListComp : TenantInfoResponse = { address: {} };
引发此错误是因为
tenantDataFromListComp.address
在
{} 中未定义
简单方法:
发生这种情况的原因是,当您的 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 一起使用
await this.http.post(...).toPromise(value => {
...
});
您应该在
ngOnInit
或类似的东西中获取数据。
有关更多信息,您可以查看: