Как обработать нулевое исключение в угловых 4

Question

эй, у меня есть несколько полей, в которых я связываю свою модель с html и данными, поступающими из бэкэнда.но когда я нажимаю, чтобы редактировать данные, он всегда говорит, что не может прочитать значение ноль.как я могу справиться с этим?

вот мой HTML

  <div class="form-group">
      <input type="text" [(ngModel)]="patient?.Address.Address1" name="address1"
             class="form-control input-underline input-lg" id="address1"
             placeholder="Address1" maxlength="50" autocomplete="off">
    </div>
    <div class="form-group">
      <input type="text" [(ngModel)]="patient?.Address.Address2" name="address2"
             class="form-control input-underline input-lg" id="address2"
             placeholder="Address 2" maxlength="50" autocomplete="off">
    </div>
    <div class="form-group">
      <div class="row">
        <div class="col-6">
          <input type="text" [(ngModel)]="patient?.Address.City" name="city"
                 class="form-control input-underline input-lg" id="city" inputName
                 placeholder="City" [required]="isOfficeStaff">
        </div>
        <div class="col-3">
          <select [(ngModel)]="patient?.Address.State" name="state"
                  [ngClass]="{'text-dimmed': !patient?.Address.State}"
                  class="form-control input-underline input-lg">
            <option [ngValue]="null" disabled>State</option>
            <option *ngFor="let state of states" [value]="state.abbreviation">
              {{state.abbreviation}}
            </option>
          </select>
        </div>
        <div class="col-3">
          <input type="text" [(ngModel)]="patient?.Address.Zip" name="zip"
                 class="form-control input-underline input-lg" id="zipcode" maxlength="5"
                 pattern="\d{5}" placeholder="Zipcode" [required]="isOfficeStaff">
        </div>
      </div>
    </div>

вот модель

export class Patient {
 id?: number;
 Email?: string;
 Address? = {
   Address1: '',
   Address2: '',
   City: '',
   State: '',
   Zip: '',
   County: '',
   Country: ''
   };
 }

ts file

public patient: Patient;

ngOnInit() {

  this.store.select("patient").subscribe(patient => {
    this.patient = Object.assign({}, new Patient(), patient);
    if (this.patient.Id && !this.patientSnapshot) {
      this.patientSnapshot = {...this.patient};
    }
  });

 });
}

когда я открываю для редактирования адреса, он выдает ошибку не может прочитать адрес свойства 1 с нулевым значением есть ли способ обработать эту ошибку дажеесли значение, полученное из, является нулевым или пустым?спасибо

Answer 1

То, что вы делаете, пытается использовать двухстороннее связывание с объектом, которого может не быть, который также имеет свойство, которого может не быть. Это не работает тогда с использованием [(ngModel)], но может работать, если вы разделите привязку следующим образом.

<input type="text" [ngModel]="patient?.Address?.Address1" (ngModelChange)="functionToHandleSettingValue($event)" name="address1" >

таким образом вы обрабатываете привязку данных с помощью ngModel и привязку данных с помощью ngModelChange.

Также обратите внимание, что в ngModel оператор должен быть

[ngModel]="patient?.Address?.Address1"

с оператором elvis на пациенте и адресом, так как оба имеют значение null.