В чем разница между [значением] и значением в Angular и каков метод проверки значения на ноль?

Question

<mat-form-field>
    <input matInput placeholder="Organization name" [value]="organizationDetail.name"
        formControlName="organizationName" required>
</mat-form-field>

Как проверить, является ли organizationDetail.name нулевым или нет? Я получаю сообщение об ошибке

ОШИБКА TypeError: Невозможно прочитать свойство 'name' с нулевым значением

в моем файле .ts. Я инициализирую его, как показано ниже:

organizationDetail: any = {};

constructor() {
    this.organizationDetail = {
        address: '',
        attachmentId: null,
        createdBy: '',
        createdDateTime: '',
        industryFramework: [],
        invitation: [],
        location: '',
        name: '',
        orgAssessment: [],
        organizationId: 0,
        organizationPolicy: [],
        ownerId: 0,
        partnerType: null,
        partnerTypeId: 0,
        phone: '',
        updateBy: '',
        updateDateTime: '',
        user: [],
    };
}

Спасибо за Ваша помощь заранее. Я не смог найти ни одной хорошей статьи, которая могла бы помочь мне выявить разницу и устранить ошибку.

Answer 1

Интерполяция и Привязка свойств практически одинакова, а bind-sr ​​c - просто альтернативный, многословный и не часто используемый.

разница :

интерполяция"вводит" значение в html, поэтому, когда вы говорите, value="{{ hello }}" Angular вставляет вашу переменную в скобки .

привязка свойства позволяет Angular напрямую обращаться к свойству elements в html. это более глубокий доступ. Когда вы говорите, что [value]="hello" Angular захватывает свойство value элемента и устанавливает свою переменную в качестве значения этого свойства.

привязка события позволяет использовать такие события, как щелчок для запуска функций. эти привязки используют круглые скобки, например (click)="myFunction($event)". это вызовет метод myFunction (), определенный в вашем файле .ts. круглые скобки вокруг '(click)' связывают функцию с событием dom. $ event - это ключевое слово, передающее объект события в функцию. Вы также можете передать строку с одинарными кавычками или даже переменную с интерполяцией.

Двухстороннее связывание (данные) позволяет объединить событие с привязкой свойства. Например,

<input [(ngModel)]="username">
<p>Hello {{username}}!</p>    

позволит вам иметь вход и отображать значение одновременно. узнайте больше здесь

Наконец когда использовать интерполяцию и когда использовать привязку данных. Обычно это формальность, обычно при использовании интеллектуального компонента и немого (презентационного) компонента вы привязываете к html со связыванием свойства из-за читабельности, и потому, что, скажем так, «более безопасно» привязывать к собственность в этом случае. Если у вас есть простые значения, то, возможно, интерполяция - ваш друг. Все сводится к удобочитаемости, лучшей практике и предпочтениям.