angular - ngFor 没有在 Angular 中实时更新列表值

Question

我在父组件中添加了一个组件。子组件从服务器获取数据并以模式显示。问题是它没有实时更新数据。

这是子组件的html:

<!--Permission MODAL-->
<div class="modal fade" id="transactionPermissionModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
        <p class="text-center">Create New</p>


          <div *ngFor="let permittedProfile of assignedPermissions" class="row">
            <div class="col-12">
              <p class="myText float-left">{{permittedProfile.profile.email}}({{permittedProfile.permission_type}})</p>
              <span style="float: right; cursor: pointer" (click)="RemovePermissionToUser(permittedProfile.profile.email)">&times;</span>
            </div>
          </div>

        <div class="row">
          <div class="col-7" style="padding-right: 0px;">
            <input type="text" style="border-right: none" class="new-transaction-textfield" placeholder="Invite Someone" id="permission-email">
          </div>
          <div class="col-3" style="padding-left: 0px;padding-right: 0px;">
            <select id="permission-dropdown" style="background-color: transparent; height: 32px; border: 1px solid #d9d9d9;border-left: none; outline: none">
              <option value="edit">can edit</option>
              <option value="view">can view</option>
            </select>
          </div>
          <div class="col-2" style="padding-left: 0px;">
            <button type="button" class="btn invite-btn" (click)="GivePermissionToUser()">Invite</button>
          </div>
        </div>

        <br />

      </div>
      <!--<div class="modal-footer">-->
      <button type="button" id="permission-modal-close-btn" data-dismiss="modal" style="display: none">Close</button>
      <!--</div>-->
    </div>

  </div>
</div>

这是获取数据并保存数据的特定函数，因此由于数据绑定(bind)，它应该在 UI 上实时可见

/**
   * Get permission list from server
   *
   * @param nextLink: link to retrieve a specific page/result_set
   * @param childIndex: index number if user has clicked any child of a transaction otherwise it 'll be null
   */
  GetPermissionsList(nextLink, childIndex: number = null) {

    if (nextLink === '') {
      this.assignedPermissions = [];
    }
    console.log(this.assignedPermissions);

    this.transactionsService.HandlePermissionRequestGeneracially(
      {}, this.url + nextLink, 'GET'
    ).subscribe((response) => {

      for (const entry of response.results) {
        this.assignedPermissions.push(entry);
      }

      this.shouldPermissionsVisible = true;
      console.log(this.assignedPermissions);

      const next = response.next;
      if (next !== null) {
        this.GetPermissionsList(next.substring(next.indexOf('?'), next.length), childIndex);
        return;
      }
    }, (error) => {
      this.snackbarHandler.showSnackBar('Error while getting permission');
    });
  }

它从服务器获取正确的数据，但问题是它不会立即在 UI 上更新它。第一次打开模式时，它不显示任何数据，但第二次它显示第一次的结果。这意味着它只显示保存的旧数据，而不是从服务器检索到的数据。

我正在这样调用 GetPermissionList 函数:

const myThis = this;
    $('#transactionPermissionModal').on('shown.bs.modal', function (e) {
      myThis.GetPermissionsList('');
    });

Answer 1

首先，您应该使用 Angular 事件而不是查询选择器。您是否有充分的理由不能这样做？

其次，正如您所说的 console.log 调用正常工作，这意味着成员变量 assignedPermissions 实际上没有在正确的对象中修改。

这指出了真正的问题:myThis 不起作用，因为调用的上下文在回调中不正确。它会导致您遇到此类问题:How to access the correct `this` inside a callback?

按照这个推理，这是设置回调的正确方法(我再说一遍，这不是 Angular 的做法):

$('#transactionPermissionModal').on('shown.bs.modal', (function (e) {
  this.GetPermissionsList('');
}).bind(this));

或

$('#transactionPermissionModal').on('shown.bs.modal', e => this.GetPermissionsList(''));