在 angularjs 和 typecript 中绑定

Question

我正在使用带有打字稿的旧版 angularjs 1.5。活动用户卡中的数据在父级更改时未更新

家长

<active-user-card active-users="response.activeUsers"></active-user-card>

活跃用户卡

export class ActiveUserCard {

  activeUsers: number;

  data: Array<IChartData>;

  constructor() {

    ........

    ........

    this.inactiveUsers = (totalUsers - this.activeUsers) || 0;

    this.data = [

      {name: "Active users",   y: this.activeUsers},

      {name: "Inactive users", y: this.inactiveUsers}

    ];

    ........

    ........

  }

}

angular.module('tm')

  .directive('activeUserCard', [function() {

    return {

      restrict: 'E',

      scope: {

        activeUsers: '<'

      },

      bindToController: true,

      controller: ActiveUserCard,

      controllerAs: 'auc',

      templateUrl: "./active-user-card.html"

    };

  }]);

Answer 1

首先，如果直接在 HTML 中使用父数据，那么它会立即使用 Angular 的 $watch 反映出来。但是在这里，您希望更改反映在组件的this.data变量中。您必须听取更改，然后更新 this.data。$onChanges(changes) {&nbsp; &nbsp; if (changes.activeUsers&& changes.activeUsers.currentValue) {&nbsp; &nbsp; &nbsp; // update your code here&nbsp; &nbsp; &nbsp; // i don't know where totalusers are comigng in below but you just figure out.&nbsp; &nbsp; &nbsp; &nbsp;const inactiveUsers = (totalUsers - changes.activeUsers.currentValue) || 0;&nbsp; &nbsp; &nbsp; &nbsp;this.data = [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {name: "Active users",&nbsp; &nbsp;y: changes.activeUsers.currentValue},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {name: "Inactive users", y: inactiveUsers}&nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; }&nbsp; }我建议尝试重用代码。从构造函数和make方法中取出代码来设置以总用户和活动用户为参数的数据并制作数据。相同的方法应该从 $onChanges 钩子和 changes.activeUsers.currentValue 中调用。所以代码会很干净谢谢