как отобразить начальные значения, взятые из базы данных для двухсторонней привязки данных в angular

Question

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

Итак, у меня есть модель Рецепт

export class Recipe {
  constructor(
      public name: String
  ) {}
}

в компоненте RecipeComponent

import { Recipe } from './Recipe';

export class RecipeComponent {
  data = new Recipe('');
}

, показанном в форме html

<input type="text" class="form-control" id="name" 
  required
  [(ngModel)]="data.name" />

<p>Hello {{ data.name }}!</p>

Это прекрасно работает, если я хочу создать новую модель с нуля , Но я хочу, чтобы пользователь мог видеть, каковы выходные значения, поэтому каким-то образом в строке data = new Recipe('') я хочу использовать мой RecipeService для заполнения входных данных.

Answer 1

Демонстрация по этой ссылке на стек

Вам нужен один сервис и вы можете получать данные от сервиса к компоненту. а затем привязать его к [()] ng модели.

service.ts

@Injectable()
 export class DataService {
  data = {
   name: 'wesbos'
  };
 constructor() { }
 getData(){
  return of(this.data);
 }

}

component.ts

export class AppComponent  {
  name = this.dataService.getData();
  constructor(private dataService: DataService){}
}

компонент. html

<div *ngIf="name | async as dataName">
   default Name : <input [(ngModel)]="dataName.name">
</div>