Question

当子组件使用ng-if *时，使用嵌套的反应形式时会发生此异常。这是导致问题的模板插值。请参阅repro：

https://plnkr.co/edit/GrvjN3sJ05RSNXiSY8lo

import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.*;

import javax.swing.*;

public class Ripples extends JFrame {
public Ripples() {
    // window
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setTitle("Ripples");
    setBounds(250, 250, 1000, 1000);
    setVisible(true);
    addMouseListener(new MouseListener() {

        public void mousePressed(MouseEvent e) {
            Animation animation = new Animation(e.getX(), e.getY());
            add(animation);
        }

        public void mouseReleased(MouseEvent e) {

        }

        public void mouseClicked(MouseEvent e) {

        }

        public void mouseEntered(MouseEvent e) {

        }

        public void mouseExited(MouseEvent e) {

        }
    });
}

public static void main(String[] args) {
    Ripples demo = new Ripples();
}

class Animation extends JPanel{
    private int radius;
    private int x;
    private int y;
    private Timer timer;

    Animation(int x, int y) {
        this.x = x;
        this.y = y;
        radius = 0;

        timer = new Timer(10, new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                if (radius > 200) {
                    resetRadius();
                    timer.stop();
                }
                increaseRadius();
                repaint();
            }
        });
        timer.start();
    }

    public void increaseRadius() {
        radius += 1;
    }

    public void resetRadius() {
        radius = 0;
    }

    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.setColor(Color.BLACK);
        g.drawOval(x - (radius / 2), y - (radius / 2), radius, radius);
    }
}

Answer 1

我们一次又一次地遇到这个错误的问题......

基本上很多人都不想了解这个错误的原因是什么。因此，我们看到很多答案，主要解决方案是调用第二个生命周期摘要。但在某些情况下，它不会有所帮助。

角度变化检测是一种综合机制。为了获得洞察力，您必须每天使用它并且必须一次又一次地调试它。

首先，我强烈建议您阅读@ angularindepth-com

这篇精彩的文章

https://blog.angularindepth.com/he-who-thinks-change-detection-is-depth-first-and-he-who-thinks-its-breadth-first-are-both-usually-8b6bf24a63e6

现在，真相就在那里......

我创建了另外一个组件，如：

@Component({
  selector: 'my-form-info',
  template: `{{form.value|json}}`
})
export class MyFormInfoComponent {
  @Input() form: FormGroup
}

并将其添加到根html而不是插值：

<form [formGroup]="myForm" novalidate>
  <my-form [parentForm]="myForm"></my-form>
</form>
<my-form-info [form]="myForm"></my-form-info>

现在，角度没有抱怨该错误，因为我已经更改了变更检测顺序。

<强> Ng-run Example

另见

Catch Angular template errors like a pro or how I create Angular Demo

ExpressionChangedAfterItHasBeenCheckedError动态反应表单

1 个答案: