开发者问题收集

错误类型错误:无法读取 TenantsDetailsComponent_Template 中未定义的属性“street1”

2021-01-10
211

我在组件加载 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>
3个回答

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

<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 来检查值是否存在,但如果您需要验证的字段更多,这会变得更加复杂。

Apoorva Chikara
2021-01-10

您可以定义一个新对象来包含一个空地址对象

tenantDataFromListComp : TenantInfoResponse = { address: {} };

引发此错误是因为 tenantDataFromListComp.address{} 中未定义

Owen Kelvin
2021-01-10

简单方法:

发生这种情况的原因是,当您的 HTML 文件呈现时,您的 tenantDataFromListComp 变量是 { ,并且很明显 { 没有 addressstreet1 。 有很多方法可以解决这个问题。我经常使用的方法之一是将 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 或类似的东西中获取数据。 有关更多信息,您可以查看:

Vala Khosravi
2021-01-10