Angular 5 无法读取未定义的属性“删除”答案

【问题标题】：Angular 5 cannot read property 'remove' of undefinedAngular 5 无法读取未定义的属性“删除”
【发布时间】：2018-11-18 19:02:19
【问题描述】：

所以，我一直在努力学习 ASP.NET Core 2 和 Angular 5（我是 Django/Rails Vue 专家），在做了一些琐碎的例子之后，我决定用新堆栈。问题是我无法找出这个错误的根源。

这是我的登录组件模板：

<div class="login-container">
  <h2 class="login-title">{{title}}</h2>
  <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-horizontal">
    <div class="form-group" *ngClass="{' has-errors has-feedback' : hasErrors('Username')}">
      <input type="text" formControlName="Username" class="form-control" required placeholder="Usuario o Email" />
    </div>
    <div class="form-group" *ngClass="{' has-errors has-feedback' : hasErrors('Password')}">
      <input type="password" formControlName="Password" class="form-control" required placeholder="*****" />
    </div>
    <button type="submit" [disabled]="form.invalid" class="btn btn-md btn-success">Entrar</button>
  </form>
</div>

这是打字稿：

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {


  title: string;
  form: FormGroup;

  constructor(private router: Router,
    private fb: FormBuilder,
    private authService: AuthService,
    @Inject('BASE_URL') private baseUrl: string) {
    this.title = 'Entrar';
  }

  ngOnInit(): void {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      Username: ['', Validators.required],
      Password: ['', Validators.required]
    });
    console.log(this.form);
  }
  onBack() {
    this.router.navigate(['home']);
  }
  getFormControl(name: string) {
    return this.form.get(name);
  }
  isValid(name: string) {
    const e = this.getFormControl(name);
    return e && e.valid;
  }
  isChanged(name: string) {
    const e = this.getFormControl(name);
    return e && (e.dirty || e.touched);
  }

  hasErrors(name) {
    return this.isChanged(name) && !this.isValid(name);
  }

  onSubmit() {
    const url = this.baseUrl + 'api/token/auth';
    const username = this.form.value.Username;
    const password = this.form.value.Password;
    this.authService.login(username, password)
      .subscribe(res => this.router.navigate(['home']),
        err => this.form.setErrors({ 'auth': 'Usuario o password incorrecto' }));
  }
}

我在 SO 中阅读了类似的问题，但最终决定发布此问题，因为：

据我所知，我的模板中没有任何内容是 undefined（我认为这里唯一的绑定是 form）
我没有调用/读取名称为 remove 的任何内容。

提前致谢。

【问题讨论】：

标签： angular typescript angular5

【解决方案1】：

我在不小心将[ngClass] 添加到<ng-container /> 时遇到了同样的错误

【讨论】：

【解决方案2】：

通过模板代码找到答案：

应该是 [ngClass] 而不是 *ngClass，因为 * 是结构指令的简写。编写 *ngClass 会导致对 DOM 的一些错误调用，这就是我最终得到错误的原因。

【讨论】：