Angular поле модели не обновляется при подписке

Question

Упрощенно Я получил представление:

<table class="table table-bordered table-striped">
<tr>
  <td>
    <label>First Name</label>
    <input type="text" class="form-control" [(ngModel)]="profile.FirstName">
  </td>
  <td>
    <label>Last Name</label>
    <input type="text" class="form-control" [(ngModel)]="profile.LastName">
  </td>
 </tr>
</table>

Компонент, в котором конструктор создает пустой профиль и ngOnInit проверяет наличие изменений:

profile: Profile;
sub: any;
constructor(private serv: ProfileService, private route: ActivatedRoute) {
  this.profile = new Profile('', '');
}

ngOnInit(): void {
  this.sub = this.route.params.subscribe(params => {
    const id = params['id'];
    this.serv.getProfile(id).subscribe(res => {
      console.log(res);
      this.profile = res;
      // this.profile.LastName = res.LastName; doesn't work either
    });
  });
}

На консоли регистрируется правильный профиль , но поля таблицы не обновляются. Что не так? Спасибо за любую помощь!

Answer 1

Ваш код выглядит корректно, и представление должно быть обновлено. Похоже, вы используете onPush Стратегия обнаружения изменений . Если да, то вам нужно явно запустить обнаружение изменений:

@Component({
  selector: 'yourSlector',
  template: `<!-- The code is omitted for the brevity -->`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent { 

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
      this.sub = this.route.params.subscribe(params => {
          const id = params['id'];
          this.serv.getProfile(id).subscribe(res => {
              console.log(res);
              this.profile = res;
              this.cdr.detectChanges();          
          });
      });
   }
}

Пожалуйста, посмотрите пример рабочего стека.

Answer 2

Вся проблема была связана с PascalCase против CamalCase. Назначение в подписке не завершается ошибкой, пока вызов REST передает атрибуты в CamelCase со свойствами класса Profile в PascalCase.

this.serv.getProfile(id).subscribe(res => {
  console.log(res);
  this.profile = res; // THIS WILL NOT FAIL
});

Следовательно FirstName, LastName и т. Д. c. никогда не назначаются.

Answer 3

То, что angular ищет для запуска привязки, является изменением ссылки.

Вы не изменяете ссылку, когда назначаете так:

this.profile.LastName = res.LastName;

что вы хотите использовать оператор распространения, как это:

this.profile = { ...this.profile, lastName: res.lastName }