如何在 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){}
}

component.html

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

how to display initial values taken from database for two way data binding in angular