Angular 将可观察数据修补到反应式表单字段

Question

我有一个响应式表单，我正在像这样初始化 oninit() ，以及我用来从 URL 中获取传递的 id 并判断表单是否用于更新的其他几个属性，或在 mysql 表中创建一个新条目。 我遇到的问题是使用 patchValue 将从我的服务返回的数据传递到我的表单中：

组件.ts

    export class formComponent implements OnInit, AfterViewInit {
    
    constructor(
       private dataService: dataService,
       private route: ActivatedRoute,
       private router: Router,
       private formBuilder: FormBuilder,
       private ticketModel: ticketModel,
     ) {}

    Form!: FormGroup;
    isNewMode!: boolean;
    id!: string;
    ticket!: ticketModel[];

    ngOnInit(){    
        this.id = this.route.snapshot.params['id'];
        this.isNewMode = !this.id;

    this.Form = this.formBuilder.group({
    field1: ['', Validators.required],
    field2: ['', Validators.required],
    field3: ['', Validators.required],
    field4: ['', Validators.required] 

    });
}

ngAfterViewInit(){
  if(!this.isNewMode){
  this.sub = this.dataService.getById(this.id)
  .pipe(first())
  .subscribe({
    next: ticketData => {
    this.ticket = ticketData;
  },
});

this.Form.patchValue({
field1: this.ticket.field1, //error, "Property 'field1' does not exist on type 'ticketModel[]'"
field2: this.ticket.field2, //error, "Property 'field2' does not exist on type 'ticketModel[]'"
field3: this.ticket.field3, //error, "Property 'field3' does not exist on type 'ticketModel[]'"
field4: this.ticket.field4, //error, "Property 'field4' does not exist on type 'ticketModel[]'"

});

    }
  }
}

票证模型.ts

export class ticketModel {
    id: string = '';
    field1: string = '';
    field2: string = '';
    field3: string = '';
    field4: string = '';
}

服务.ts

export class dataService {
constructor(private errorHandlerService: errorHandlerService, private http: HttpClient) {}

private url = "/api/tickets";

httpOptions:{ headers: HttpHeaders } = {
      headers: new HttpHeaders({ "Content-Type": "application/json" }),
  };

getById(id: string): Observable<ticketModel[]> {
        return this.http
        .get<ticketModel[]>(`${this.url}/${id}`, {responseType: "json"})
        .pipe(tap((_) => console.log('returned by service: ', JSON.stringify(_))),
        catchError(
          this.errorHandlerService.handleError<ticketModel[]>("fetchAll", [])
        )
        );
    }

并且以防万一，这是运行此方法时得到的响应 json 的示例

[{"id":18,"field1":"string data","field2":"data is here","field3":"another string goes here","field4":"this is another example string"}]

如果没有传入的 id，则 isNewMode 为 true，并且表单使用空白值初始化，从那里可以正常工作。 当传入 id 时，我将其传递给数据服务中的方法以查询数据库并仅返回该行。 这似乎也可以正常工作，因为我能够将 json 格式的数据记录到控制台。 在尝试了几种不同的方法后，我只是无法弄清楚如何将数据修补到表单中。

目前，我认为这应该起作用的方式是这段代码的一个例子，在 patchValue() 中，当它绝对作为属性存在时，编译器会抛出“属性 field1 在类型 ticketModel[] 上不存在”的错误在那个 model 上。

我觉得我可能遗漏了一些非常小的东西，并且在弄清楚什么会受到广泛赞赏时提供任何帮助，谢谢！

Answer 1

您已将ticket:: ticketModel[]声明为一个数组类型。

您的响应也是一个数组 -

[{"id":18,"field1":"string data","field2":"data is here","field3":"another string goes here","field4":"this is another example string"}]

那你为什么不把this.ticket当作一个数组呢？

field1: this.ticket.field1,

以这种方式使用它 - field1: this.ticket[0].field1或使用 for 循环从中获取 field1 和其他值。

而且您需要修补订阅块内的表单，因为它是异步操作。

Answer 2

实际上，您的服务 getById 应该返回一个“TicketModel”或一组 TicketModel。 优于组件管理，使用 map 管理服务

//see that is an observable of "ticketModel"
getById(id: string): Observable<ticketModel> {
    //you needn't use {responseType:'json'}, by defect Angular expect a Json
    return this.http
    .get<ticketModel[]>(`${this.url}/${id}`)
    .pipe(
         //just return the uniq element of the array
         map(res=>res.length?res[0]:null),
         tap((_) => console.log('returned by service: ', JSON.stringify(_))),
    catchError(
      this.errorHandlerService.handleError<ticketModel>("fetchAll", [])
    )
    );
}

此外，您需要在订阅 function 中使用“ patchValue ”，并且您可以在不创建新 object 的情况下使用该patchValue，因为具有相同的属性

if(!this.isNewMode){
  this.sub = this.dataService.getById(this.id)
  .pipe(first())
  .subscribe({
    next: ticketData => {
    this.ticket = ticketData; //<--really you needn't use ticketData
                              //unless you want compare old and new Values
    //here you make the patchValue
    this.form.patchValue(ticketData);
  })
}

（你也可以用 ngOnInit 代替 ngAfterViewInit）

更新“经典”问题的另一种方法来创建一个组件来编辑/创建一个元素。

如果您有 function 之类的

getForm(data:TicketModel=null){
  data=data || {} as TicketModel
  return new FormGroup({
    id: new FormControl(data.id,Validators.required),
    field1: new FormControl(data.field1,Validators.required),
    field2: new FormControl(data.field2,Validators.required),
    field3: new FormControl(data.field3,Validators.required),
    field4: new FormControl(data.field4,Validators.required)
  })
}

你可以在 ngOnInit 中做一些喜欢

   ngOnInit(){
     this.id = this.route.snapshot.params['id'];
     this.isNewMode = !this.id;
     if (this.isNewMode)
        this.Form=this.getForm()
     else
     {
        this.sub = this.dataService.getById(this.id)
        .pipe(first())
        .subscribe(res=>{
          this.Form=this.getForm(res)
        })
      }
   }