小编Aji*_*wat的帖子

我有一个表,我想在其中显示一个表行,这是一个组件.而且我还想将数据传递给该组件:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

在my-component,HTML是少数几个<td></td>从data1和呈现的数据data2.

但是在渲染之后,由于<my-component></my-component>我的CSS破坏导致所有my-componentHTML(整个表行)显示在第1列中.

结果如上:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

我尝试了以下方法:

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

但这会导致错误Can't bind to 'data1' since it isn't …

我在角4中有以下菜单

<button mat-button [matMenuTriggerFor]="menu" style="display:none;">Menu</button>
    <mat-menu #menu="matMenu">
        <button mat-menu-item *ngFor="let item of items" (click)="select(item)">
            {{ item }}
        </button>
    </mat-menu>

当用户使用屏幕选择文本时,我打开菜单 matMenuTrigger.openMenu();

但是我希望在用户选择文本的地方打开菜单.我有用户选择的X和Y坐标,但如何更改菜单的位置？

我已尝试将Id添加到mat-menu并使用更改它的位置

element.style.position = 'absolute'
element.style.left = screenX + 'px'
element.style.top = screenY + 'px'

但它并没有改变菜单的位置.

编辑: 我改变了菜单的位置

this.matMenuTrigger.openMenu();
var element = document.getElementsByClassName('cdk-overlay-pane');
menu.style.position = "absolute";
menu.style.left = evt.pageX + 5 + 'px';
menu.style.top = evt.pageY + 5 + 'px';

其中evt是mouseup事件,它给出了用户文本选择的坐标(X,Y).

但是,当我滚动页面时,打开的菜单再次回到原来的位置.如何保持菜单在滚动时改变位置？