Блог

У меня есть наблюдаемый объект, который извлекает список данных. Меня обманывают с slice помощью трубы, предоставленной angular, хотя это не самое сложное. Ниже приведен мой пример:

 value$: Observable<number[]>;
// this is present in TS. Let's say this fetches an array with value as [1, 2, 3, 4, 5, 6, 7, 8, 9]
 

Теперь я хочу разделить этот массив на 3 разных div, из которых первый будет содержать первые 6 элементов, последний-последние 3 элемента, а второй — элементы, присутствующие между первыми 6 и последними 3. Поэтому для этого я написал следующую логику:

Div 1

 <div *ngFor="let ele of value$ | async | slice: 0:6">...</div>
// This is working fine
 

Раздел 2

 <div *ngFor="let ele of value$ | async | slice: -4:6">...</div>
// This is not working fine
 

Раздел 3

 <div *ngFor="let ele of value$ | async | slice: -3">...</div>
// This is working fine
 

Здесь второе div работает не так, как ожидалось, скорее оно принимает некоторые значения из первого div .

Может ли кто-нибудь указать мне, что я здесь делаю не так?

На мой взгляд, лучший способ добиться этого-использовать сращивание, так как вы не определяете размер второго массива, предполагая, что размер вашего массива является динамическим. Самая большая проблема заключается в том, что ваш начальный набор содержит только 9 элементов, поэтому первый берет 6, последний берет 3, и ничего не остается, и, оглядываясь назад на индекс -4, вы находите последний индекс первого массива.

Используя сращивание, вы достигаете того же результата и показываете точно первые 6 и последние 3.

всякий раз, когда у вас возникают какие — либо сомнения относительно функций, вы можете обратиться к веб-документам Slice-mdn.

Соединение — mdn веб-документы