如何从异步函数更新 HTML？

Question

我需要调用一个异步函数。应从该函数更新 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() 被正确调用，因为在模板中设置 class 是有效的。

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

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

Answer 1

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

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;

如何从异步函数更新 HTML？

How to update HTML from async function?

dart

angular-dart

angular