Question

如何设置Angular Material输入字段的值。然后从我的组件中我从我的数据库中获取数据作为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>

有关更多信息，请参见正式的角度文档：https://angular.io/guide/reactive-forms

Answer 2

乍一看，您似乎忘记将回复映射到json ...

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

此时你的数据＆＃34; var会有你想要的json .. 然后在你的模板上你可以采用几种不同的方式进行角度调整..这里是一个简单的方法

<mat-form-field *ngFor="let user of data">
    <input matInput placeholder="Name" [(ngModel)]="user.name">
</mat-form-field>

更新：为了做到这一点，你必须将rxjs模块添加到你的项目...

npm install --save rxjs

并将其导入* .component.ts文件

import 'rxjs/add/operator/map';

你可能不得不添加Observable，它可能没有

import { Observable } from 'rxjs';

如何设置matInput的值

2 个答案: