如果Angular2中的Boolean为真，如何调用函数？
如果Angular2中的Boolean为真，如何调用函数？
提问于 2018-08-05 06:11:16
在这里，我编写了一个弹出函数，并且在我的组件类中有一个布尔标志。我的标志将根据我的条件返回true或false。在模板类中，当标志变为true时，需要触发弹出函数，然后我的弹出对话框就会立即出现。但是我不知道如何调用正确的方法，如果有人知道请帮助我正确的方法。
<ng-template #sessionSuccessModal let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Include Criteria Error</h4>
<button type="button" class="close" aria-label="Close" (click)="closeModel()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" class="bg-light text-dark">
<p>{{ alertMessage }}!</p>
</div>
<div style="text-align: center" class="bg-light text-dark">
<button type="button" (click)="closeModel()">Ok</button>
</div>
</ng-template>
初始commaSeparation将为false，this.commaSeparation = this.genericValidator.validateMultiComma(this.orderUnitForm)；此函数返回true或false。如果是真的，那么我需要调用我的displayModel() alert方法。现在弹出窗口工作正常，在ngAfterViewInit()中调用，但在控制台中遇到错误，如。
ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。前一个值：'ng-untouched: true‘。当前值：'ng-untouched: false‘
ngAfterViewInit() {
let controlBlurs: Observable<any>[] = this.formControls
.map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement, 'blur'));
// debounceTime(1000)/
Observable.merge(this.orderUnitForm.valueChanges, ...controlBlurs).subscribe(value => {
this.displayMessage = this.genericValidator.processMessages(this.orderUnitForm);
// this.valid = this.genericValidator.validateControls(this.orderUnitForm);
});
this.orderUnitForm.valueChanges.debounceTime(1000).subscribe(value => {
this.valid = this.genericValidator.validateControls(this.orderUnitForm);
this.commaSeparation = this.genericValidator.validateMultiComma(this.orderUnitForm);
if(this.commaSeparation == true){
this.displayModel();
}
});
}
这是我的dispalyModel()函数：
displayModel() {
this.alertMessage = 'You cannot enter more than one multiple at the same time ';
this.successErrorModalBlock = this.modalService.open(this.sessionSuccessModalref);
}
回答 2
Stack Overflow用户
发布于 2018-08-06 04:23:58
您可以通过实现接口OnChanges来实现这一点，该接口是Angular的生命周期挂钩。
import { Component, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnChanges {
// the flag property
commaSeparation: boolean;
ngOnChanges(changes: SimpleChanges){
if (changes['commaSeparation'] && changes['commaSeparation'].currentValue){
this.showPopup();
}
}
public showPopup(){
alert('Replace this alert by the code that shows your popup');
}
}Stack Overflow用户
发布于 2018-08-05 06:23:11
一般来说，在angular表达式中调用有副作用的函数不是一个好主意。Angular可以自由地调用这些函数，但是它经常希望确保结果是相同的。您应该在这些表达式中使用函数来返回结果，而不是引发操作。
我建议从你的控制器调用popupAlert，例如
$scope.$watch('commaSeparation', function(commaSeparation) {
// The value of commaSeparation has just changed. Alert if it changed to true!
if (commaSeparation) {
popupAlert();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51689898
复制相关文章
相似问题
腾讯云开发者
