模态弹出窗口中的垫树节点

Question

In my application I want to create a modal pop up. I get errors when I refer to a component with mat tree . In console I see the following errors Could not find a tree control for the tree and multiple There can only be one default row without a when predicate function. .

The modal works if I refer to another component without mat tree .

I've used the examples from angular material and I have the same issue in my application. I only see a button for the pop up modal. Click on Pick One button to see the pop up.

https://stackblitz.com/edit/angular-uzh1tt

In dialog overview example component modal works with dialog-overview-example-dialog selector and template url . It does not work with tree flat .

I want to see the modal pop up with mat tree with all the nodes expanded.

Answer 1

This has nothing to do with your actual tree control, but how you were trying to access it.

Change your code to this

const dialogRef = this.dialog.open(TreeFlatOverviewExample, {
      width: '250px'
    });

and import { TreeFlatOverviewExample } from './tree-flat-overview-example';

You were trying to open a component that you had defined at the bottom of your code instead of the TreeFlatOverviewExample. In that component you were trying to load in the html of your tree component, which did in fact work, but it ONLY loaded the html. You needed to load the associated typescript as well. This is why your error messages were saying it couldn't find the typescript variable treeControl.