javascript - Angular 补丁可观察数据到 react 表单字段

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[]'"

});

    }
  }
}

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() 中，编译器会抛出错误“ticketModel[] 类型上不存在属性 field1””当它确实作为该模型的属性存在时。

我觉得我可能错过了一些非常小的东西，以及任何帮助找出我们会非常感激的东西，谢谢!

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 和其他值。

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