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">

我的Angular看起来像这样，

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

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

我从来没有像这样使用过角度，我通常不得不使用范围和控制器。

有人可以告诉我我在做什么错吗？ HTML出现问题吗？还是我使用的模型错误？我是Angular的新手，如果有人可以消除这个疑问，我将不胜感激！

Answer 1

嗨，你能这样尝试吗，

如果以下一项不起作用，则意味着尝试将您的表单模板驱动更改为模型驱动的表单（反应性表单）

下面我使用的是Reactive为我设计的作品

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);
    }
}

如何访问ngOnChanges字段？

3 个答案: