Блог

У меня есть пользовательский канал, который получает массив объектов. Этот канал выполняет итерацию по каждому объекту в массиве и изменяет свойство ‘name’ этого объекта, чтобы ограничить количество отображаемых символов:

 `
  transform(gearImages: GearImage[]): GearImage[] {         
    let viewImagesArr: GearImage[] = [];    

    for (let index = 0; index < gearImages.length; index  ) {
      let viewImage = Object.assign({}, gearImages[index]);
      viewImage.name = viewImage.name.slice(0, 27);
      viewImagesArr = [...viewImagesArr, viewImage];
    }
    return viewImagesArr;
  }
`
  

В шаблоне HTML я использую его следующим образом:

 `
 *ngFor="let gearImage of gearItemImages | gearImageView">{{ gearImage.name }}
`
  

Пользователь может добавлять элементы в массив и удалять. Я хочу анимировать добавление и удаление элементов в массиве. Все это работает хорошо, за исключением того, что когда пользователь добавляет или удаляет элементы, весь массив повторно отображается вместо отдельных элементов. Я понимаю, что этот канал является чистым каналом, поэтому он будет повторно отображаться только при изменении ссылки. Возможно ли создать чистый канал, который изменяет свойства объектов только для представления и повторно отображает, когда отдельные элементы добавляются или удаляются из массива?

Мне действительно не нравится тот факт, что я должен обрезать фактическое имя объекта {name: 'superLongNameThatIWantToKeepOnlyTrimForVIew'} . Я хотел бы сохранить фактическое имя и обрезать только имя представления

Есть идеи?

Я думаю, что вы хотите использовать trackBy see https://angular.io/api/common/NgForOf#description

  *ngFor="let gearImage of gearItemImages; trackBy:trackByfn | gearImageView">{{ gearImage.name }}
  

 public trackByFn(index, item) {
  return item.id
}
  

Это подскажет Angular отслеживать ваш элемент dom по идентификатору элемента, поэтому angular не будет повторно отображать этот элемент dom, если идентификатор не изменится. таким образом, изменения массива не будут повторно отображать весь список