изображение на дисплее в сетке с помощью extjs
Вы можете использовать собственный Angle ngSwitch для добавления различных компонентов на каждую вкладку в соответствии с вашей бизнес-логикой, а затем оставить общие части вне ngSwitch. Нечто подобное:
<mat-tab-group>
<mat-tab *ngFor="let tripOption of tripOptions">
<ng-template mat-tab-label>
<mat-icon class="svg-frq-light-blue new-trip-image" svgIcon="{{tripOption.name}}"></mat-icon>
</ng-template>
<h1>Common code</h1>
<ng-container [ngSwitch]="tripOption.name">
<app-brazil-trip *ngSwitchCase="'Brazil'"></app-brazil-trip>
<app-indonesia-trip *ngSwitchCase="'Indonesia'"></app-indonesia-trip>
<app-chile-trip *ngSwitchCase="'Chile'"></app-chile-trip>
<span *ngSwitchDefault>Trip not found!</span>
</ng-container>
</mat-tab>
</mat-tab-group>
3 ответа
You need to add a renderer to your columns that you want to display an image. The renderer value is the function to call to render the image tag.
One of your column elements modified:
{header: "Photo", width: 100, renderer:renderIcon, dataIndex: 'form-file', sortable: true},
A sample renderer function:
function renderIcon(val) {
return '<img src="' + val + '">';
}
In this example, the value of the dataIndex must be the full path of the image. If not then you must add some additional logic.
попытка использования "рендеринга" приписывает на объявлении столбца, что Вы хотите показать изображение в. Используя атрибут Рендеринга можно произвести HTML по Вашему выбору. Проверьте его на форумах ExtJs :) Надеюсь, что указывает на Вас в правильном направлении
можно записать XML-файл как htmlspecialchars ("") затем можно просмотреть его просто.