在Angular8中，无法显示DataGrid单元格中的DropDownBox

Question

我想在一个DataGrid单元格（DevExtreme DataGrid）中放置一个DropDownBox， 下拉框将显示另一个DataGrid，用户可以选择多个值 然后将其显示在单元格中，每一个之间用

隔开

我制作了一个样本，但是没有显示下拉列表框， 然后我在DataGrid外面放了另一个下拉框，它就可以正常工作。

这是我的html代码：

<h2 class="content-block">Display Data</h2>

<div>
    <p>this is DropDownBox outside DataGrid:</p>
    <dx-drop-down-box
    [(value)]="selectedValues"
    valueExpr="sid"
    displayExpr="name"
    placeholder="Select several values..."
    [showClearButton]="true"
    [dataSource]="dropDownGridDataSource"
    >

    <div *dxTemplate="let data of 'content'">
        <dx-data-grid
                [dataSource]="dropDownGridDataSource"
                [columns]="['sid', 'name']"
                [selection]="{ mode: 'multiple' }"
                [hoverStateEnabled]="true"
                [paging]="{ enabled: true, pageSize: 10 }"
                [filterRow]="{ visible: true }"
                [scrolling]="{ mode: 'infinite' }"
                [height]="345"
                [(selectedRowKeys)]="selectedValues"
        >
        </dx-data-grid>
    </div>
    </dx-drop-down-box>


</div>

<dx-data-grid class="dx-card wide-card"
    [dataSource]="dataSource"
    [showBorders]="false"
    [focusedRowEnabled]="true"
    [focusedRowIndex]="0"
    [columnAutoWidth]="true"
    [columnHidingEnabled]="true">

    <dxo-editing 
        mode="row"
        [allowUpdating]="true"
        [allowDeleting]="true"
        [allowAdding]="true">
    </dxo-editing>

    <dxo-paging [pageSize]="10"></dxo-paging>
    <dxo-pager [showPageSizeSelector]="true" [showInfo]="true"></dxo-pager>
    <dxo-filter-row [visible]="true"></dxo-filter-row>

    <dxi-column
        dataField="Task_ID"
        [width]="90"
        [hidingPriority]="2">
    </dxi-column>
    <dxi-column
        dataField="Task_Subject"
        [width]="190"
        caption="Subject"
        [hidingPriority]="8">
    </dxi-column>
    <dxi-column
        dataField="Task_Status"
        caption="Status"
        [hidingPriority]="6">
    </dxi-column>
    <dxi-column
        dataField="Task_Priority"
        caption="Priority"
        [hidingPriority]="5">
        <dxo-lookup
            [dataSource]="priority"
            valueExpr="value"
            displayExpr="name">
        </dxo-lookup>
    </dxi-column>
    <dxi-column
        dataField="ResponsibleEmployee.Employee_Full_Name"
        caption="Assigned To"
        [allowSorting]="false"
        [hidingPriority]="7">

        <!-- this is DropDownBox in DataGrid cell -->
        <dx-drop-down-box
        [(value)]="selectedValues"
        valueExpr="sid"
        displayExpr="name"
        placeholder="Select several values..."
        [showClearButton]="true"
        [dataSource]="dropDownGridDataSource"
        >

        <div *dxTemplate="let data of 'content'">
            <dx-data-grid
                    [dataSource]="dropDownGridDataSource"
                    [columns]="['sid', 'name']"
                    [selection]="{ mode: 'multiple' }"
                    [hoverStateEnabled]="true"
                    [paging]="{ enabled: true, pageSize: 10 }"
                    [filterRow]="{ visible: true }"
                    [scrolling]="{ mode: 'infinite' }"
                    [height]="345"
                    [(selectedRowKeys)]="selectedValues"
            >
            </dx-data-grid>
        </div>
        </dx-drop-down-box>

    </dxi-column>
    <dxi-column
        dataField="Task_Start_Date"
        caption="Start Date"
        dataType="date"
        [hidingPriority]="3">
    </dxi-column>
    <dxi-column
        dataField="Task_Due_Date"
        caption="Due Date"
        dataType="date"
        [hidingPriority]="4">
    </dxi-column>
    <dxi-column
        dataField="Task_Priority"
        caption="Priority"
        [hidingPriority]="1">
    </dxi-column>
    <dxi-column
        dataField="Task_Completion"
        caption="Completion"
        [hidingPriority]="0">
    </dxi-column>
</dx-data-grid>

它没有显示任何错误，但是即使单元格中的DropDownBox也没有显示