我想从角度表单模板控制器调用异步函数。但是,如果我这样做,执行就会挂起。
跟随html模板:
<div class="container">
<form>
<div class="form-group">
<label for="address">Identnummer (Adresse) *</label>
<input type="text" class="form-control" id="address" required placeholder="0x"
[(ngModel)]="model.address"
#address="ngForm"
[ngClass]="setAddressCssValidityClass(address)"
ngControl="address">
</div>
<div class="row">
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<small class="col text-right">* Required</small>
</div>
</form>
</div>
这是我的控制器的简化版:
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
@Component(
selector: 'sCert-validate-form',
templateUrl: 'sCert_validate_form_component.html',
directives: [coreDirectives, formDirectives],
)
class ScertValidateFormComponent {
Map<String, bool> setAddressCssValidityClass(NgControl control) {
var validityClass;
//callCertificateByAddress(control.value);
if(control.value == "test"){
validityClass = 'is-valid';
callCertificateByAddress(control.value);
}
else{
validityClass = 'is-invalid';
}
Map<String, bool> map = {validityClass: true};
return map;
}
Future<bool> callCertificateByAddress(String address) async {
// some code -> also does not work if removed
return true;
}
}
Future<bool> callCertificateByAddress(String address) async
必须是异步的,因为我在那里进行了异步lib调用。但是如何结合模板来实现呢?
只使用这样的异步管道
[ngClass]="setAddressCssValidityClass(address) | async"
存在问题:您将回调绑定到此处的输入[ngClass]="setAddressCssValidityClass(address)"
在每个更改检测周期中,角度调用函数[将调用网络]。并且来自http的响应会强制执行新的更改检测,该检测会递归地一次又一次地调用http。将结果保存到某个变量,然后将其绑定到ngClass而不是方法上。
ngOnInit() {
this.classes = this.setAddressCssValidityClass(address);
}
....
[ngClass]="classes"