Question

我有一个角度组件和控制器，如下所示：

export class MyController{

    static $inject = [MyService.serviceId];

    public elements: Array<string>;
    public errorReceived : boolean;

    private elementsService: MyService;

    constructor(private $elementsService: MyService) {
        this.errorReceived = false;
        this.elementsService= $elementsService;
    }

    public $onInit = () => {
        this.elements =  this.getElements();
        console.log("tiles: " + this.elements);
    }


    private getElements(): Array<string> {
        let result: Array<string> = [];
        this.elementsService.getElements().then((response) => {
            result = response.data;
            console.log(result);
        }).catch(() => {
            this.errorReceived = true;
        });
        console.log(result);
        return result;
    }
}

export class MyComponent implements ng.IComponentOptions {
    static  componentId = 'myId';

    controller = MyController;
    controllerAs = 'vm';

    templateUrl = $partial => $partial.getPath('site.html');
}

MyService实现如下所示：

export class MyService {

    static serviceId = 'myService';

    private http: ng.IHttpService;

    constructor(private $http: ng.IHttpService) {
        this.http = $http;
    }

    public getElements(): ng.IPromise<{}> {
        return this.http.get('./rest/elements');
    }

}

我面临的问题是，在调用onInit（）之后，数组元素包含一个空数组。但是，稍后，我看到收到的数据是因为调用getELements（）中的success函数并将元素写入控制台。

我在模板中使用的元素，用于决定是否应显示特定元素：

<div>
    <elements ng-show="vm.elements.indexOf('A') != -1"></elements>
</div>

现在的问题是vm.elements首先包含一个空数组，只有在以后，数组才会填充实际值。但是，模板中的这个表达式已经被评估过了。我怎么能改变它？

Answer 1

您当前的实施没有意义。您需要了解promises和异步构造如何在这种语言中工作才能实现您的目标。幸运的是，这并不太难。

您当前实现的问题是您的init方法会立即返回一个空数组。它不会返回服务调用的结果，因此控制器中的属性只会再次绑定到一个不是您想要的空数组。

请考虑以下内容：

export class MyController {
   elements: string[] = [];

   $onInit = () => {
     this.getElements()
       .then(elements => {
         this.elements = elements;
       });
  };

  getElements() {
    return this.elementsService
      .getElements()
      .then(response => response.data)
      .catch(() => {
        this.errorReceived = true;
      });
   } 
}

利用async / await

，您可以使其更具可读性

export class MyController {
   elements: string[] = [];

   $onInit = async () => {
     this.elements = await this.getElements();
   };

   async getElements() {
     try {
       const {data} = await this.elementsService.getElements();
       return data;
     } 
     catch {
       this.errorReceived = true;
     }
   } 
}

请注意以上内容如何使用标准try / catch语法。这是async / await的众多优势之一。

值得注意的另一件事是，您的数据服务应该打开响应data属性，并返回该值，以便您的控制器不关心HTTP服务的语义。

ngShow表达式过早评估

1 个答案: