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

Question

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

这是我的打字稿代码：

    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);
      }
    );
  }

这是我的 .html 代码

<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>

这是我的浏览器截图。请看一下

项目数据显示在控制台中 console.log() 但我无法在表单中显示它。

Answer 1

我认为这是因为从 server.You 获取文件的同步 problem.Because 必须像这样使用：

    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
          });

    }

        })

Answer 2

"tailor" 不是一个数组，它是一个对象，您不能像以前那样访问它的属性，请试试这个：

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);

})

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

setValue data not showing in form fields, When i edit a list item

angular

angular-material

angular-forms