Как установить значение для matInput
Как установить значение для поля ввода Угловой материал. Затем из моего компонента я получаю данные из моей базы данных как объект json и хочу установить их как значения в поле ввода формы Angular Material.
this.http.get('http://localhost:8000/v1/passenger/2/getPassenger').
subscribe(
response => {
this.data = response.json();
}
);
как передать значения в форме.
Решение
Поскольку вы используете ввод формы, используйте Angular’s 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
Другие решения
на первый взгляд кажется, что вы забыли сопоставить ответ с json …
this.http.get('http://localhost:8000/v1/passenger/2/getPassenger')
.map(res => res.json())
.subscribe(
response => {
this.data = response.json();
});
в этот момент у вашей «data» 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';