Question

我的项目中有一个项目清单。添加项目和更新项目工作正常。我想在编辑项目页面的表单字段中显示项目数据。

这是我的打字稿代码：

optional

这是我的.html代码

    export class EditTailorComponent implements OnInit {
  userToken: string;
  edit_id: any;
  tailor: Array<any> = [];

  constructor(private fb: FormBuilder, private https: HttpClient, private router: Router) {
    this.userToken = localStorage.getItem('credentials');
    this.edit_id = localStorage.getItem('edit_id');
   this.formValue();

  }
  editTailorForm = new FormGroup({
    name:new FormControl(),
    phone_number: new FormControl(),

 });

  ngOnInit() {
    const data = {
      tailor_id: this.edit_id,
      user: this.userToken
    };
    this.https.post<any>('api/tailor/details',data).subscribe((response)=>{
      this.tailor=response.tailor;
      console.log(this.tailor);
      this.editTailorForm.controls['name'].setValue(this.tailor[0].name);
      this.editTailorForm.controls['phone_number'].setValue(this.tailor[0].phone_number);

    })
  }


  submitdata() {
    const data = {
      tailor_id: this.edit_id,
      name: this.editTailorForm.value.name,
      phone_number: this.editTailorForm.value.phone_number,
      user: this.userToken
    };

    this.https.post<any>('api/tailor/update', data).subscribe(
      response => {
        if (response.response_code === 200) {
          this.router.navigate(['list-tailor']);
        }
      },
      error => {
        console.log(error.error);
      }
    );
  }

这是我的浏览器屏幕截图。请看看

项目数据用<div class="container"> <mat-card> <form [formGroup]="editTailorForm"> <div class="col1"> <div class="form-group"> <mat-form-field> <input matInput placeholder="Name" formControlName="name" > </mat-form-field> </div> </div> <div class="col2"> <div class="form-group"> <mat-form-field> <input matInput placeholder="Contact Number" formControlName="phone_number" > </mat-form-field> </div> </div> <div class="form-group"> <button mat-raised-button color="primary" (click)="submitdata()">edit Tailor</button> </div> </form> </mat-card> </div>显示在控制台中，但我不能以表格形式显示。

Answer 1

“定制”不是一个数组，它是一个对象，您无法像以前那样访问其属性，请尝试以下操作：

ngOnInit() {
const data = {
   tailor_id: this.edit_id,
   user: this.userToken
};
 this.https.post<any>('api/tailor/details',data).subscribe((response)=>{
  this.tailor=response.tailor;
  console.log(this.tailor);
  this.editTailorForm.controls['name'].setValue(this.tailor.name);
  this.editTailorForm.controls['phone_number'].setValue(this.tailor.phone_number);

})

Answer 2

我认为这是因为同步问题。由于您是从服务器获取文件，因此必须这样使用：

    ngOnInit() {
    const data = {
      tailor_id: this.edit_id,
      user: this.userToken
    };
    this.https.post<any>('api/tailor/details',data).subscribe((response)=>{
    ///You must check if response is ok/ready so use If conditional
    if (response) {
      this.tailor=response.tailor;
      console.log(this.tailor);
      this.editTailorForm.controls['name'].setValue(this.tailor[0].name);
      this.editTailorForm.controls['phone_number'].setValue(this.tailor[0].phone_number);
}

    })

编辑：我想您必须像这样setVAlue来尝试这种方式，以便使用官方文档。

 ngOnInit() {
        const data = {
          tailor_id: this.edit_id,
          user: this.userToken
        };
        this.https.post<any>('api/tailor/details',data).subscribe((response)=>{
        ///You must check if response is ok/ready so use If conditional
        if (response) {
          this.tailor=response.tailor;
          console.log(this.tailor);
          this.editTailorForm.setValue({
           name: this.tailor.name
           phone_number: this.tailor.phone_number
          });

    }

        })

setValue数据未显示在表单字段中，当我编辑列表项时

2 个答案: