时间戳

首页 > 解决方案 > 错误类型错误：无法在 TenantsDetailsComponent_Template 读取未定义的属性“street1”

angular - 错误类型错误：无法在 TenantsDetailsComponent_Template 读取未定义的属性“street1”

问题描述

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

typeError：无法读取 TenantsDetailsComponent_Template 中未定义的属性“street1”（tenants-details.component.html:92）

组件.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;
}

组件.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>

标签： angulartypescriptangular-ngmodel

解决方案

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

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

推荐阅读