TS2564：属性“signupForm”没有初始值设定项，并且未在构造函数中明确分配

Question

我正在使用ViewChild进行角度表单提交。这是我的代码，

应用程序组件.ts

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('f') signupForm: NgForm; 

    onSubmit(){
        console.log(this.signupForm);
    }
}

应用程序组件.html

<form #f="ngForm" (ngSubmit)="onSubmit()" novalidate></form>

但我收到这个错误

src/app/app.component.ts:11:21 - 错误 TS2564：属性“signupForm”没有初始值设定项，并且未在构造函数中明确分配。

11 @ViewChild('f') signupForm: NgForm;

Answer 1

终于找到答案了。我必须在tsconfig.json内部制作strictPropertyInitialization标志。由于有人提出了同样的问题，因此添加此内容会发现这很有用。（你可能需要再次使用ngserve）false

tsconfig.json

{
  "compilerOptions": {
    ...
    "strictPropertyInitialization": false
  }
}

Answer 2

你也可以这样做：

@ViewChild('f') signupForm!: NgForm; 

对于!操作符，你基本上会说：我知道我在做什么，并且我知道 Angular 会为我设置这个值。有关运算符的更多信息，请参阅此答案。