Цель: я пытаюсь обновить атрибут «name» объекта кризиса в шаблоне html.
Проблема: директива ngModel не считывает начальное значение cris.name в html -input, и он также не обновляет имя, когда пользователь редактирует поле ввода.
Визуализация проблемы:
Пустое поле ввода, которое должно быть привязано к cris.name
Html шаблон:
<h2>Crisis</h2>
<div *ngIf="crisis$ | async as crisis">
<h3>"{{ crisis.name }}"</h3>
<div>
<label>Id: </label>{{ crisis.id }}</div>
<div>
<label>Name: </label>
<input [(ngModel)]="crisis.name" >
</div>
<p>
<button (click)="goToCrises(hero)">Back</button>
</p>
</div>
Компонент:
export class CrisisDetailComponent implements OnInit {
// The input decorator simply allows parent components to pass down a value to it
// The parameter itself still acts as a normal attribute of the component
public crisis$: Observable<Crisis>;
constructor(
private router: Router,
private route: ActivatedRoute,
private crisisService: CrisisService
) { }
public ngOnInit(): void {
console.log('detail initialized');
this.crisis$ = this.route.paramMap.pipe(
switchMap((params: ParamMap) => this.crisisService.getCrisis(params.get('id')))
);
}
public goToCrises(crisis: Crisis): void {
const crisisId = crisis ? crisis.id : null;
this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
}
}