元素隐含地具有“任何”类型，因为 ANGULAR 中的类型表达式

Question

我在更新列出的表单时遇到错误，ReactForm 这是我附加的代码请帮我解决这个问题...提前致谢 我的代码::

import { CommonService } from './../common.service';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-update-resturant',
  templateUrl: './update-resturant.component.html',
  styleUrls: ['./update-resturant.component.css']
})
export class UpdateResturantComponent implements OnInit {
  alert : Boolean = false;
  updateResto = new FormGroup({
    Name: new FormControl(''),
    Email: new FormControl('')
  })

  constructor(private resto:CommonService, private router: ActivatedRoute) { }

  ngOnInit(): void {
    this.resto.getCurrentData(this.router.snapshot.params.id).subscribe((result)=> {
      console.log(result)
      this.updateResto = new FormGroup({
        Name: new FormControl(result['Name']),
        Email: new FormControl(result['Email'])
    })
  }
  }

错误::

元素隐式具有“任何”类型，因为“电子邮件”类型的表达式不能用于索引类型“对象”。 “对象”类型上不存在属性“电子邮件”。

服务代码::

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class CommonService {
URL= "http://localhost:3000/list"

  constructor(private _http:HttpClient) { }
  getRestoList(){
    return this._http.get(this.URL)
  }

  addResto(data: any){
    return this._http.post(this.URL, data);
  }

  // deleteCurrentData(id: any){
  //   return this._http.delete(`${this.URL}/${id}`)
  // }

  getCurrentData(id: number){
    return this._http.get(`${this.URL}/${id}`)
  }
}

Answer 1

您无需重新创建 FormGroup，只需更新 FormControl 值即可。结帐Reactive Form Guides

ngOnInit(): void {
    this.resto.getCurrentData(this.router.snapshot.params.id).subscribe((result)=> {
      this.updateResto.controls['Name'].setValue(result['Name']);
      this.updateResto.controls['Email'].setValue(result['Email']);

      // OR you can update them all at once
      this.updateResto.setValue({
        Name: result['Name'],
        Email: result['Email']
    })
  }

请参阅以下example 以供参考。

Answer 2

更新：
首先在 OnInit 中分配您的表单组：

ngOnInit(): void {
  this.updateResto = new FormGroup({
    // name form controls in lowerCamelCase
    name: new FormControl(''),
    email: new FormControl(''),
  });

  // then make a query to your backend API
  this.resto.getCurrentData(this.router.snapshot.params.id).subscribe((result)=> {
      // I just gave wrong answer, since formGroup.value's are readonly properties
      // to update values use formGroup.patchValue():
      this.updateResto.patchValue({
        name: result.whatevervalue,
        email: result.whatevervalue2
      });
  })
}

在类的顶部，您只需定义变量 updateResto：

// ! is for strict mode, typescript throws errors that your variable was not defined
updateResto!: FormGroup;

根据您的代码，当您输入组件时，您已经创建了 FormGroup，当您的服务返回值时，您尝试分配新的表单组