如何访问ngOnChanges字段？

Question

我的HTML看起来像这样：

<input type="number" class="form-control" id="khatianNumber" required [(ngModel)]="big.khatianNumberP1" name="khatianNumber" #khatianNumber="ngModel">

<p id="parapart" align="center">/</p>

<input type="number" class="form-control" id="khatianNumber2" required [(ngModel)]="big.khatianNumberP2" name="khatianNumber2" #khatianNumber1="ngModel">

我的角度看起来像这样，

export class RegistrationComponent implements OnInit,OnChanges {
isRequesting = false;
steps = [];
model = {
  khatianNumber: '',
};

big = {
  khatianNumberP1: '',
  khatianNumberP2: '',
}
ngOnChanges(changes: SimpleChanges){
    if (changes['big.plotNumberP1']){
        alert("hi");
    }
}
}

我从来没有像这样使用过angular，我通常不得不使用作用域和控制器。

谁能告诉我我做错了什么？是我的HTML有问题，还是我使用的模型有误？我是Angular的新手，如果有人能澄清这个疑问，我将不胜感激！

Answer 1

嗨，你能试一试吗，

如果下面的一个不起作用意味着尝试将您的表单模板驱动更改为模型驱动的表单(反应式表单)

下面是我使用的反应形式，它为我工作

ngOnChanges(changes: {[propKey: string]: SimpleChange})
    {
        if(changes.hasOwnProperty('big.khatianNumberP1')){}
}

Answer 2

ngOnChanges用于从父组件传递给子组件的数据。为了捕获模型更改，您需要使用事件侦听器，它是ngModelChange，或者，如果您有基本的表单，则基本上可以使用change侦听器。有关它们之间的区别以及如何使用两者的详细信息，请参阅这篇文章：(change) vs (ngModelChange) in angular

Answer 3

如果要在表单元素发生更改时运行操作，最好将[(ngModel)]="big.khatianNumberP1"分为[ngModel]="big.khatianNumberP1"和(ngModelChange)="numberP1Changed()"。

然后，在您的组件代码中，您可以拥有一个处理程序，它可以执行您需要的任何操作：

export class RegistrationComponent {
    isRequesting = false;
    steps = [];
    model = {
        khatianNumber: '',
    };
    big = {
        khatianNumberP1: '',
        khatianNumberP2: '',
    }

    numberP1Changed() {
       alert("hi - new value - " + this.big.khatianNumberP1);
    }
}