#angular #typescript #angular-ngmodel
#угловой #машинописный текст #angular-ngmodel
Вопрос:
Я сталкиваюсь с этой ошибкой при загрузке компонента T
Ошибка типа: не удается прочитать свойство ‘street1’ неопределенного значения в TenantsDetailsComponent_Template (tenants-details.component.html:92)
component.ts
я определил свой объект здесь
tenantDataFromListComp : TenantInfoResponse = { };
Интерфейс TenantInfoResponse имеет свойство типа Address interface, например
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>
Комментарии:
1. Это не моя область знаний, но я предлагаю вам добавить немного контекста к вопросу, чтобы объяснить, что вы пытаетесь сделать.
Ответ №1:
существует лучший способ проверить, существует ли это свойство для вашего объекта или нет
<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, чтобы проверить, существуют ли значения или нет, но это становится более сложным, если у вас есть больше полей для проверки.
Комментарии:
1. Я пробовал это, но это дает
Parser Error: Unexpected token ?, expected identifier or keyword at column 24 in [tenantDataFromListComp.?address.street1]2. Моя ошибка, используйте [tenantDataFromListComp?.address.street1] . вот так — это была опечатка
Ответ №2:
Вы можете определить новый объект так, чтобы он содержал адрес с пустым объектом address
tenantDataFromListComp : TenantInfoResponse = { address: {} };
Выдается ошибка, поскольку tenantDataFromListComp.address не определено в {}
Комментарии:
1. Раньше я использовал ту же технику, но один из моих друзей сказал мне, что это неправильный способ, поскольку в интерфейсе `TenantInfoResponse` все определено. Кроме того, я смущен, что некоторые свойства, которые имеют строковый, числовой или логический тип данных, могут быть доступны с использованием того же
tenantDataFromListComp.displayNameсамого. Я обновляю вопрос, чтобы показать вам мой полный интерфейс `TenantInfoResponse`
Ответ №3:
Простой метод:
Это происходит потому, что при рендеринге вашего HTML-файла tenantDataFromListComp ваша переменная {} равна, и очевидно, что {} у нее нет address и street1 . Существует много методов, которые могут решить эту проблему. Один из них, который я всегда использую, — добавление ngIf к родительскому элементу или самому себе. В вашем случае это что-то вроде этого:
<div class="form-group col-md-6" *ngIf="tenantDataFromListComp.address amp;amp; 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 или что-то вроде этого.
Для получения дополнительной информации вы можете оформить заказ:
Комментарии:
1. tenantDataFromListComp имеет тип TenantInfoResponse
tenantDataFromListComp : TenantInfoResponse, а TenantInfoResponse имеет определенный тип свойства адресаexport interface Address { city?: string; country?: Address.CountryEnum; postcode?: string; province?: string; street1?: string; street2?: string; }2. ваше решение работает, но проблема в том, что я хочу, чтобы каждый элемент загружался при загрузке компонента. В вашем решении это условие неверно, тогда элемент не будет отображаться, пока я не обновлю значения. Кроме того, у меня так много других полей, например, контактная информация имеет разные поля, которые я не могу записать * ngIf для каждого элемента
3. Я обновлю свой ответ, потому что я знаю, что вы имеете в виду