angularjs - AngularJS 模板在浏览器交互之前不会更新

Question

我很难弄清楚这一点，所以我会尽力解释它。

我有这样的服务

export class Users {
    constructor(private Api) {}

    public async getUsers() {
        return this.Api.get('/users');
    }
}

在我的组件中，我像这样使用它

export const myComponent = {
    template: '<pre>{{$ctrl.users|json}}</pre>',
    controller: class MyComponent implements IController {
        public users: any[] = [];

        constructor(private Users) {}

        public $onInit() {
            this.fetchUsers();
        }

        public async fetchUsers() {
            this.users = await this.Users.getUsers();
            console.log(this.users);
        }
    }
}

我可以看到console.log 工作得很好，但是模板不会更新，直到我以某种方式与浏览器交互，例如单击某些东西或按下某个键。到底是怎么回事？我究竟做错了什么？