在渲染时触发 onClick 在 Angular 组件中动态创建网格问题

Question

我正在 Angular 中制作 devExpress 网格的可重用组件。 以下代码是可重用组件（正在制作中）和使用它的父组件。

问题（到目前为止）

1. 使用 ngFor 动态添加列和按钮。当行呈现时，按钮的 [onClick] 事件正在发生，我做错了什么或如何阻止它？
2. 是否可以添加属性成为可选的，例如在列上我只需要添加属性“类型”，如果它是按钮行。在 Angular 中，将其设为 null，例如 [type]="value ? '' : null" 但这似乎不起作用。

parent component html
<core-table-dev-express [dataSource$]="dataSource$" [columns]="columns2" [enableBatchEdit]="true"></core-table-dev-express>

parent component ts
   //data from server 
   public dataSource$: Observable<Container[]>;
   
   //columns for grid
   public columns2: dxColumn[] = [
        { caption: 'Title', dataField: 'title' },
        { caption: 'Id', dataField: 'id', dataType: 'number' },
        {
            type: "buttons", 
            caption: 'Actions',
            buttons: [{
                text: 'Foo',
                parentClassObject: this.alertMe
            },
            {
                text: 'Bar',
                parentClassObject: this.alertMe
            }]
        }
    ]

grid component html

        <dx-data-grid id="gridContainer1"
                      [dataSource]="dataSource$ | async"
                      keyExpr="id"
                      [repaintChangesOnly]="true"
                      [columnHidingEnabled]="true"
                      [columnAutoWidth]="true"
                      [showBorders]="true"
                      [showColumnLines]="true"
                      [showRowLines]="true"
                      [rowAlternationEnabled]="true"
                      [allowColumnReordering]="false"
                      [allowColumnResizing]="false">
            <dxo-load-panel [enabled]="true"></dxo-load-panel>
            <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
            <dxo-column-chooser [enabled]="true" mode="select"></dxo-column-chooser>
            <dxo-state-storing [enabled]="true" type="localStorage" storageKey="storage"></dxo-state-storing>
            <dxo-search-panel [visible]="true"></dxo-search-panel>
            <dxo-filter-row [visible]="true"></dxo-filter-row>
            <dxo-group-panel [visible]="true"></dxo-group-panel>
            <dxo-scrolling rowRenderingMode="virtual"></dxo-scrolling>
            <dxo-paging [pageSize]="gridDefaultPagesize"></dxo-paging>
            <dxo-pager [showPageSizeSelector]="true"
                       [allowedPageSizes]="[15,25,100]"
                       [showInfo]="true"
                       [visible]="true">
            </dxo-pager>

            <dxo-editing *ngIf='enableBatchEdit' mode="batch"
                         [allowUpdating]="true"
                         [allowAdding]="true"
                         [allowDeleting]="true"
                         [selectTextOnEditStart]="true">
            </dxo-editing>

            <dxi-column *ngFor="let col of columns"
                        dataField="{{col.dataField}}"
                        caption="{{col.caption}}"
                        dataType="{{col.dataType}}"
                        type="{{col.type}}">     <!-- can type be conditionally set? -->
                    <dxi-button *ngFor="let b of col.buttons"
                                text="{{b.text}}"
                                hint="{{b.hint}}"
                                cssClass="{{b.cssClass}}"
                                icon="{{b.icon}}"
                                [onClick]="click($event,b)"
                                >
                    </dxi-button>
            </dxi-column>

        </dx-data-grid>

grid component ts

import {
    Component, Input, ChangeDetectionStrategy, AfterContentInit,
    EventEmitter, Output, OnDestroy, ViewChild, ChangeDetectorRef, NgZone, OnInit
} from "@angular/core";
import { dxColumn } from './../interfaces/table.interfaces';
import DataSource from 'devextreme/data/data_source';
import ODataStore from 'devextreme/data/odata/store';
import { Observable } from 'rxjs';

@Component({
    selector: 'core-table-dev-express',
    templateUrl: './table-dev-express.component.html',
    styleUrls: ['./table-dev-express.component.scss'],
})
export class TableDevExpressComponent {
    // Shared Variables
    public gridDefaultPagesize = 5;

    @Input() dataSource$: Observable<any>;
    @Input() columns: dxColumn[];
    @Input() enableBatchEdit: boolean;
    @Output() parentMethod = new EventEmitter<any>();

    click = function(e,b) {
        this.parentMethod.emit(b.parentClassObject(e)); // need to send back row data
    }


}

Answer 1

type="{{ condition ? expressionIfTrue : expressionIfFalse }}"

Answer 2

我使用了模板功能并制作了自己的 html，而不是使用 dxi 按钮。

我还想出了如何回调父方法，但不是最漂亮的代码。

传入的父对象：

public columns2: dxColumn[] = [
        { caption: 'Title', dataField: 'title' },
        { caption: 'Id', dataField: 'id', dataType: 'number' },
        {
            caption: 'Actions',
            buttons: [{
                text: 'Edit',
                cssClass: "btn btn-primary btn-sm",
                clickMethodName: "routerTo",
                parentClassObject: this
            },
            {
                text: 'Clone',
                cssClass: "btn btn-primary btn-sm",
                clickMethodName: "cloneContainer",
                parentClassObject: this
            }]
        }
    ]

共享组件的HTML

     <dxi-column *ngFor="let col of columns"
                            dataField="{{col.dataField}}"
                            caption="{{col.caption}}"
                            dataType="{{col.dataType}}"
                            type="{{col.buttons ? 'buttons': null}}">
    
                    <dxi-button template="rowButtons">
                        <div class="btn-group" *dxTemplate="let data of 'rowButtons'">
                            <div *ngFor="let b of col.buttons">
                                <button class="{{b.cssClass}}" (click)="click(data,b)">{{b.text}}</button>
                            </div>
                        </div>
                    </dxi-button>
                </dxi-column>
    

共享组件的打字稿代码

click = function (row, button) {
       this.parentMethod.emit(button.parentClassObject[button.clickMethodName](row.data))
}