如何设置 matInput 的值

Question

如何设置角度材质输入字段的值。然后，我从我的组件中以 json 对象的形式从数据库获取数据，我想将这些数据设置为 Angular Material 表单输入字段中的值。

this.http.get('http://localhost:8000/v1/passenger/2/getPassenger').
  subscribe(
      response => {
        this.data = response.json();
      }
  );

如何在表单中传递值。

Answer 1

由于您使用的是表单输入，因此请使用 Angular 的 ReactiveForm。

导入ReactiveFormsModule到您的app.module.ts.

在您的组件中创建一个服务来保存您的表单组，例如：

@Injectable({
    providedIn: 'root'
})
export class SettingsService {

    public formGroup = new FormGroup({

        name: new FormControl('', [

            Validators.required,

        ])

    });

}

现在在您的 api 调用中引用您的服务并更新值：

...
constructor(myformService: MyFormService) {}

yourApiCall() {

this.http.get('http://localhost:8000/v1/passenger/2/getPassenger')
    .map(res => res.json())
    .subscribe(
        response => {
            this.myformService.formGroup.controls.name.setValue(response.name);
        });

}
...

并在您的组件中引用您的表单组：

<form [formGroup]="myformService.formGroup">

  <mat-form-field>
    <input matInput placeholder="Name" formControlName="name">
  </mat-form-field>

</form>

有关更多信息，请参阅官方 Angular 文档：https ://angular.io/guide/reactive-forms