Угловая 6 труба не отображает значок материала
Когда я хочу показать значок материала через угловую трубу, это не сработает.
Представьте себе случай, когда у вас есть данные и вы хотите преобразовать их в значок, например:
У вас есть список людей, которые любят мороженое или нет, если ему это нравится, у вас есть данные «нравится», а если нет, у вас есть данные «не нравится» и эти два параметра, которые вы хотите преобразовать в значок «нравится». 'будет' <mat-icon>favorite</mat-icon> ', а' неприязнь 'будет чем-то другим.
Я думал, что будет легко, если я использую какой-нибудь Pipe, но он не отображает значок :(
Вот пример: https://stackblitz.com/edit/angular-uasanh
Я предполагаю, что это происходит из-за цепочки элементов рендеринга.
Может ли кто-нибудь дать мне инструкцию, как заставить его работать?
Я не думаю, что вы вызываете компонент в трубе. Лучшее, что я могу предложить, - это использовать ngIf. Я имею в виду, почему бы и нет?
@LazaroHenrique это не о вызове компонента в канале, а о передаче компонента в innerHTML. даже эта штука не будет работать [innerHTML] = "'<mat-icon> любимый </mat-icon>'"
Спасибо разработчикам, я хотел использовать это с ngx-datatable, но мне удалось решить эту проблему с помощью некоторого ng-шаблона, поскольку innerHTML не компилируется. Еще раз спасибо :)
Можете сказать, как вы решили эту проблему с помощью ng-template?
Привет @dasfdsa, надеюсь, это поможет: stackblitz.com/edit/angular-daiupg Если вам нужно подробное объяснение, спросите :)
Замечательно. вы можете получить это как ответ. Благодарность
Ответы 1
Если у кого-то такая же проблема, мне удалось заменить трубы на ng-template. Вот пример: https://stackblitz.com/edit/angular-daiupg
PS: Если вы хотите отображать значки с помощью ngx-datatable, ng-template также может быть полезен.
это то, что я понял сегодня, innerHTML не компилирует переданный HTML для пользовательских элементов angular.