Блог

вот мой код в home.component.html

 <div class="scrollmenu" >
<mat-chip-list>
  <mat-chip *ngFor="let category of categories" class="matchip">
    {{ category.cat_name }}
  </mat-chip>
</mat-chip-list>
</div>
 

ниже вы можете увидеть home.component.css

 .scrollmenu{
    width:100%;
    overflow: auto;
  white-space: wrap;
}
.matchip {
    display: inline-block;
}
 

но это не работает.Мне нужно показать свой список чипсов для мата с возможностью горизонтальной прокрутки. Спасибо.

Мне пришлось переопределить css внутреннего класса-оболочки mat-chip-list-wrapper , чтобы заставить горизонтальную прокрутку работать:

 ::ng-deep .mat-chip-list-wrapper {
  flex-wrap: unset !important;
  width: 100px;
  overflow-x: scroll;
}
 

Вы можете ознакомиться с рабочим примером по адресу https://stackblitz.com/edit/angular-ivy-gxyvf9?file=src/app/app.component.css

Попробуйте сделать это в home.component.css

 .matchip{
    width:100%;
    display: flex;
    overflow-x: auto;
  }
 

Ты можешь попробовать это? Я надеюсь, что это то, что вы ищете

 .scrollmenu{
  width: 200px;
  max-height: 40px;
  overflow-y: hidden;
}
.scrollmenu ::ng-deep .mat-chip-list-wrapper{
  flex-wrap: inherit !important;
}