Угловая матовая подсказка

Question

Я хочу показать массив элементов в виде списка с матово-угловой подсказкой.

Это app.component.html

<button mat-raised-button
      matTooltip={{items}}
      aria-label="Button that displays a tooltip when focused or hovered over">
      Action
</button>

Это app.component.ts

items=['A','B,'C']

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

Спасибо

Answer 1

Я думаю, вы должны попробовать эту работу для меня app.component.html

<button mat-raised-button
   matTooltip={{items.toString()}}
   aria-label="Button that displays a tooltip when focused or hovered over">Action
</button>

app.component.ts

items = ['A', 'B,' C«]

Answer 2

Полагаю, вам нужно отображать массив в каждой новой строке, затем документация предполагает, что :: ng-deep устарела, но все еще работает с последней версией

Также вам нужно разбивать строку после каждого слова, чтобы вы могли использовать Array.prototype.join,

 items=['A','B','C'];
 newItems = this.items.join("\r\n");

Вот демо STACKBLITZ

Answer 3

Вы можете использовать join метод Array для объединения массива строк с необязательным параметром, используемым для разделителя (по умолчанию он установлен на ,):

<button mat-raised-button
        [matTooltip]="items.join()"
        aria-label="Button that displays a tooltip when focused or hovered over">
  Action
</button>