Html &引用；formGroup需要一个formGroup实例。请递给我一个。”；尝试显示表时出错

试图了解如何解决这个问题。我是按照一个教程，我似乎做的一切都正常，但仍然得到这个错误

当我在Postman中测试时，我的web API工作正常。我还得到了一个涉及CORS的错误，我解决了，但这是我需要解决的最后一个错误。对不起，如果这是一个太基本的问题，但我似乎无法找到一个在线解决方案，我可以理解

这是我的HTML和TS文件

HTML

---

这是因为

viewClientsForm

值为

null

import { Component, OnInit } from '@angular/core';
import { IClient } from '../CPM-Interfaces/client';

import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ClientService } from '../services/clientService/client.service';
@Component({
  selector: 'app-view-clients',
  templateUrl: './view-clients.component.html',
  styleUrls: ['./view-clients.component.css']
})
export class ViewClientsComponent implements OnInit {


  // HERE you can do viewClientsForm = this.formBuilder.group({...etc})
  viewClientsForm: FormGroup;
  client: IClient[];
  errorMsg: string = null;
  showMsgDiv: boolean = false;
  constructor(private formBuilder: FormBuilder, private clientService: ClientService) { }

  ngOnInit() {
    this.getClients();
    if (this.client == null) {
      this.showMsgDiv = true;
    }
  }
  getClients() {
    this.clientService.GetClients().subscribe(
      responseProductData => {
        this.client = responseProductData;
        this.showMsgDiv = false;
      },
      responseProductError => {
        this.client = null;
        this.errorMsg = responseProductError;
        console.log(this.errorMsg);
      }
    );
  }
}

在模板中

您已将

viewClientsForm

变量绑定到

formGroup

属性

viewClientsForm

已定义，但该值为空。这就是为什么angular会抛出错误

如果未使用绑定，则必须定义或删除该绑定 比如：

import { Component, OnInit } from '@angular/core';
import { IClient } from '../CPM-Interfaces/client';

import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ClientService } from '../services/clientService/client.service';
@Component({
  selector: 'app-view-clients',
  templateUrl: './view-clients.component.html',
  styleUrls: ['./view-clients.component.css']
})
export class ViewClientsComponent implements OnInit {

  viewClientsForm: FormGroup;
  client: IClient[];
  errorMsg: string = null;
  showMsgDiv: boolean = false;
  constructor(private formBuilder: FormBuilder, private clientService: ClientService) { }

  ngOnInit() {
    this.getClients();
    if (this.client == null) {
      this.showMsgDiv = true;
    }
  }
  getClients() {
    this.clientService.GetClients().subscribe(
      responseProductData => {
        this.client = responseProductData;
        this.showMsgDiv = false;
      },
      responseProductError => {
        this.client = null;
        this.errorMsg = responseProductError;
        console.log(this.errorMsg);
      }
    );
  }
}

import { Component, OnInit } from '@angular/core';
import { IClient } from '../CPM-Interfaces/client';

import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ClientService } from '../services/clientService/client.service';
@Component({
  selector: 'app-view-clients',
  templateUrl: './view-clients.component.html',
  styleUrls: ['./view-clients.component.css']
})
export class ViewClientsComponent implements OnInit {


  // HERE you can do viewClientsForm = this.formBuilder.group({...etc})
  viewClientsForm: FormGroup;
  client: IClient[];
  errorMsg: string = null;
  showMsgDiv: boolean = false;
  constructor(private formBuilder: FormBuilder, private clientService: ClientService) { }

  ngOnInit() {
    this.getClients();
    if (this.client == null) {
      this.showMsgDiv = true;
    }
  }
  getClients() {
    this.clientService.GetClients().subscribe(
      responseProductData => {
        this.client = responseProductData;
        this.showMsgDiv = false;
      },
      responseProductError => {
        this.client = null;
        this.errorMsg = responseProductError;
        console.log(this.errorMsg);
      }
    );
  }
}