ngFor не обновляет значения списка в реальном времени в Angular - PullRequest
Новая
       7

ngFor не обновляет значения списка в реальном времени в Angular

6 голосов
/ 06 мая 2019

Я добавил компонент в родительский компонент. Дочерний компонент получает данные с сервера и показывает их модально. Проблема в том, что он не обновляет данные в реальном времени.

Вот 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>

вот та конкретная функция, которая получает данные и сохраняет их, чтобы они могли быть видны на пользовательском интерфейсе в реальном времени из-за привязки данных 

/**
   * 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');
    });
  }

Он получает правильные данные с сервера, но проблема в том, что он не обновляет их прямо сейчас. Когда в первый раз он открывает модальный режим, он не показывает никаких данных, но во второй раз он показывает результат первого раза. Это означает, что в нем отображаются только старые данные, сохраненные, а не те, которые были получены с сервера.

Я вызываю GetPermissionList функцию, подобную этой: 

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

1 Ответ

3 голосов
/ 06 мая 2019

Во-первых, вы должны использовать угловые события вместо селектора запросов.Есть ли веская причина, почему вы не можете?

Во-вторых, как вы говорите, вызовы console.log работают правильно, это означает, что переменная-член assignedPermissions на самом деле не изменена в правильном объекте.

Что указывает на реальную проблему: вещь myThis не работает, потому что контекст вызова не является правильным в обратном вызове.И это приводит вас к такой проблеме: Как получить доступ к правильному `this` внутри обратного вызова?

Следуя этим рассуждениям, вот правильный способ установить ваш обратный вызов (которыйПовторяю, не англоязычный способ делать): 

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

или 

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