如何从异步功能更新HTML?

问题描述 投票:0回答:1

我需要调用异步函数。通过此功能,应更新html字段。在下面的简短示例中,这将是{{typeStream | async}}

<div class="container">
  <form>
    <mark>{{typeStream | async}}</mark>
    <hr>
    <div class="form-group">
      <input type="text" class="form-control" id="address" required placeholder="0x" #address="ngForm"
        [ngClass]="classes" ngControl="address" (ngModelChange)="setAddressCssValidityClass(address)">
    </div>
  </form>
</div>

我在组件中的最后一次尝试是以不同方式使用StreamController。但是我没有找到更新html字段{{typeStream | async}}的方法。 setAddressCssValidityClass()被正确调用,因为在模板中设置类是可行的。

这里是我组件的最后一次尝试:

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'dart:async';

@Component(
  selector: 'validate-form',
  templateUrl: 'validate_form_component.html',
  directives: [coreDirectives, formDirectives], 
  pipes: [commonPipes],
)
class ScertValidateFormComponent {

  var classes;
  StreamController<String> typeController = StreamController<String>.broadcast();
  Stream<String> typeStream;

  Future<Null> ngOnInit() async {
    typeStream = typeController.stream;
  }

  void setAddressCssValidityClass(NgControl control) {
    var validityClass; 
    String value = control.value;
    if(value.length == 42){
      validityClass = 'is-valid';
      callByAddress(control.value);
    }
    else{
      validityClass = 'is-invalid';
    }
    Map<String, bool> map = {validityClass: true};
    classes = map;
  }

  Future<bool> callByAddress(String address) async {    
    // Some code which needs async
    typeController.add("Hello World!"); 
    return true;
  }
}
angular dart angular-dart
1个回答
0
投票

似乎您的流从未被初始化。您需要实现OnInit,以便在组件生命周期中将调用ngOnInit()方法,否则它将永远不会执行,并且您的流仍为null。

class ScertValidateFormComponent implements OnInit {

  var classes;
  StreamController<String> typeController = StreamController<String>.broadcast();
  Stream<String> typeStream;

  @override
  void ngOnInit() {
    typeStream = typeController.stream;
  }

  ...

但是请考虑使用这种计算的属性模式来获取流:

  StreamController<String> typeController = StreamController<String>.broadcast();
  Stream<String> get typeStream => typeController.stream;
© www.soinside.com 2019 - 2024. All rights reserved.