Question

我还是Angular的新手，我发现form和setTimeout非常奇怪...... 当我尝试在OnInit上的setTimeout中获得TD的表单控件时，它可以工作，但在setTimeout函数之外却没有。 setTimeout的超时设置为0毫秒。你知道造成这种行为的原因吗？我不想把它包装在setTimeout函数中......

模板：

<form #f="ngForm">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="text"
           name="email"
           id="email"
           [(ngModel)]="model.email"
           required
           email>
  </div>
  <div class="form-group">
    <label for="subscription">Select subscription:</label>
    <select name="subscription"
            id="subscription"
            [(ngModel)]="model.subscription">
      <option value="basic">Basic</option>
      <option value="advanced">Advanced</option>
      <option value="pro">Pro</option>
    </select>
  </div>
  <div class="form-group">
    <label for="password">Password:</label>
    <input type="text"
           name="password"
           id="password"
           [(ngModel)]="model.password"
           required>
  </div>
  <button type="submit">Submit</button>
</form>

组件：

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

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

  model = {
    email: '',
    subscription: 'advanced',
    password: ''
  };

  constructor() {}

  ngOnInit(): void {
    setTimeout(() => {
      console.log(this.f.form.get('subscription')); // Works
    }, 0);
    console.log(this.f.form.get('subscription')); // Doesn't work
  }
}

感谢您的回答+抱歉我的英语不好。

Answer 1

您无法访问setTimeout之外的表单的原因是在调用ngOnInit时，表单尚未生成。在setTimeout内运行的代码以不同的方式运行，到那时，表单就会被创建。

来自documentation：

在第一次检查指令的数据绑定属性之后，以及在检查其任何子项之前，立即调用ngOnInit。只有在实例化指令时才会调用它。

在调用ngAfterViewInit生命周期挂钩之前，表单不可用。请参阅here for all the lifecycle hooks以及如何使用它们。

为什么我可以访问setTimout中的表单控件而不是外部？

1 个答案: