Angular / CSS изменение стиля ширины элементов строки

Question

Я задумываю турник, содержащий предметы. Все они должны быть одинаковой ширины и иметь одинаковое расстояние между ними. Они могут расширяться столько, сколько они хотят, по вертикали (

здесь можно использовать стек

Проблема: Как автоматически установить ширину элементов строки? Здесь я просто помещаю значение, которое выглядит хорошо: width:200px.

Я хочу, чтобы их ширина зависела от количества элементов в строке.

Что я пробовал: Использование elementRef в Horizontile (компонент, содержащий отдельные плитки, отображается с помощью * ngFor), чтобы получить ширину этого элемента:

currentWidth:number;
constructor(private el:ElementRef) {}

  ngAfterViewInit(): void {
    this.currentWidth=this.el.nativeElement.offsetWidth;}

it возвращает 5. (??) Использование .width ничего не возвращает. Также это не рекомендуется, я хотел бы другое решение, меньше связи.

Я заметил, что я могу использовать width:inherit; в css отдельного компонента плитки, который позволяет мне устанавливать стиль из горизонтального компонента списка.

<app-tile [style.width.px]="0.9*currentWidth/nDisplayedTiles" [tile]="item"></app-tile>

Поскольку значение currentWidth равно нулю, конечно, оно не работает ;

Я пытался установить его в%, но тег inherits css сохраняет%, который не входит в ухоженный эффект. Почему стиль приложения-плитки не заботится, если не установлен inherits? Я пытался использовать ViewEncapsulation, но это также не имело никакого эффекта.

Хотя это выглядит тривиальным вопросом: я просто что-то упустил?

Answer 1

Вы можете использовать ширину offsetParent ( link ) и создать метод, который будет возвращать значение в каждой из ячеек и вызывать его в вашем [style.width.px], будет работать что-то вроде следующего.

Свойство HTMLElement.offsetParent только для чтения возвращает ссылку на элемент, который является ближайшим (ближайшим в иерархии содержимого) позиционным элементом-предком.

stackblitz

ngAfterViewInit(): void {
    //added this as the compiler was throwing ExpressionChangedAfterItHasBeenCheckedError
    setTimeout(() => { 
      this.currentWidth=this.el.nativeElement.offsetParent.clientWidth;
    });
  }

  getWidth(): number{
     let width:number = 0;

     //you may need to change this value to better display the cells
     let multiplier = 0.7;

      width = (this.currentWidth * multiplier) / this.ndisplayTiles;

      width = Math.round(width);

      return width;
  }

<app-tile [class]="'layout-tile'" [tile]="item"  [style.width.px]="getWidth()">
</app-tile>