Использование трубы среза в данных для свойства дочернего компонента вызывает бесконечные вызовы метода набора @Input - PullRequest
Новая
       5

Использование трубы среза в данных для свойства дочернего компонента вызывает бесконечные вызовы метода набора @Input

1 голос
/ 03 октября 2019

При добавлении канала среза в объект данных ниже и при отправке этих данных методу set @Input дочернего компонента этот метод вызывает бесконечные вызовы. При удалении только канала среза из объекта данных он работает как обычно, метод @Input вызывается только один раз.

Шаблон родительского компонента: 

<ng-container
  *ngIf="[
      { name: 'a', order: 1 },
      { name: 'b', order: 2 },
      { name: 'c', order: 3 },
      { name: 'd', order: 4 },
      { name: 'e', order: 5 }] | slice:0:3 as data"
>
  <slice-pipe-test [testData]="data"></slice-pipe-test>
</ng-container>

Машинописание дочернего компонента: 

  @Input()
  set testData(testData) {
    console.log(testData);
  }

Журнал консоли, показывающий бесконечные вызовы:

Вывод

Полный пример кода (необходимо добавить «| slice: 0: 3» кобъект данных в app.component.html, как показано выше, который вызывает бесконечные вызовы, и браузер зависает):

https://codesandbox.io/s/3dg47

Это как-то связано с обнаружением изменений /SlicePipe не является чистым и работает, как ожидалось? Если переместить объект данных со срезом в код машинописного текста, а затем сослаться на него в HTML-шаблоне, эта проблема больше не возникает. Как сохранить фрагмент в шаблоне html без бесконечных вызовов метода дочернего компонента @Input?

1 Ответ

1 голос
/ 03 октября 2019

В идеале вы должны использовать трубу, где отображается представление.

В вашем случае,

slice-pipe-test.component.html 

<table>
  <tr *ngFor="let item of myData | slice:0:3">
      <td>{{item.order}}</td>
      <td>{{item.name}}</td>
  </tr>
</table>

app.component.ts 

this.data = [
  { name: 'a', order: 1 },
  { name: 'b', order: 2 },
  { name: 'c', order: 3 },
  { name: 'd', order: 4 },
  { name: 'e', order: 5 }
]

app.component.html 

<ng-container *ngIf="data">
      <slice-pipe-test [testData]="data"></slice-pipe-test>
</ng-container>

Или отрежьте его из Typescript. 

this.data = [
  { name: 'a', order: 1 },
  { name: 'b', order: 2 },
  { name: 'c', order: 3 },
  { name: 'd', order: 4 },
  { name: 'e', order: 5 }
].slice(0, 3);

Шаблон: 

<ng-container *ngIf="data">
      <slice-pipe-test [testData]="data"></slice-pipe-test>
</ng-container>
...