如何解决Angular Material树如何插入img /文件
我只是从Angular开始,在任何地方都找不到解决方案。我搜索了几天,但是什么也没有。
我想:
- 在图片树中插入图片(无图标),该怎么做? (请参见代码中的注释)
示例: 这里是一棵动态树,我想有时在图片中插入图片,以说明:
*我发现了如何在每个条目之前添加图标,但这并不是我在寻找......
我的想法:我尝试在数组中添加一个新变量(名为“文件”,如“名称”),其内容是图像的路径或为null,但是不起作用?
- 我想链接某些条目(参见代码中的注释),某些文本必须是链接
请有人可以帮助我吗?
在此代码下:
documentation.component.ts:
import { NestedTreeControl } from '@angular/cdk/tree';
import { Component } from '@angular/core';
import { MatTreeNestedDataSource } from '@angular/material/tree';
// import { UserInformation } from 'src/app/interfaces/user-information/user-information';
interface DocNode {
name: string;
// file: string | null;
children?: DocNode[];
}
const TREE_DATA: DocNode[] = [
{
name: 'Parent title',children: [
{
name: 'Child Title ',children: [
{ name: 'To complete',// file : null },{ name: 'To complete',// file: './assets/img.png'},{ name: 'https://monsite.net/home.html',// *****linkify this one*****
],},{
name: 'To complete',children: [
{ name: '1. To complete',{ name: '2. To complete',// file: './assets/otherImg.png' },{ name: '3. To complete',// file : null},{ name: '4. To complete',],];
@Component({
selector: 'app-documentation',templateUrl: './documentation.component.html',styleUrls: ['./documentation.component.scss'],})
export class DocumentationComponent {
title = 'Documentation Z2C';
treeControl = new NestedTreeControl<DocNode>((node) => node.children);
dataSource = new MatTreeNestedDataSource<DocNode>();
constructor() {
this.dataSource.data = TREE_DATA;
}
hasChild = (_: number,node: DocNode) =>
!!node.children && node.children.length > 0;
}
documentation.component.html:
//to insert somewhere : <img src='{{ node.file }}'alt='screenshot'>
<div class="documentation">
<h2>{{ title }}</h2>
<mat-tree
[dataSource]="dataSource"
[treeControl]="treeControl"
class="documentation-tree"
>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<button mat-icon-button disabled></button>
{{ node.name }}
</li>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<li>
<div class="mat-tree-node">
<button
mat-icon-button
matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name"
>
<mat-icon class="mat-icon-rtl-mirror">
{{
treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'
}}
</mat-icon>
</button>
{{ node.name }}
</div>
<ul
[class.documentation-tree-invisible]="!treeControl.isExpanded(node)"
>
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
</div>
解决方法
似乎不可能或很难... 所以我用了https://material.angular.io/components/expansion/overview 现在可以了
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。