0

我一直在努力将数据从组件传递到材料对话框下面是我的代码

第一个组件 html 文件

<button md-raised-button (click)="openDialog()"><md-icon>add</md-icon</button>

在第一个组件 .ts 文件中

data = {
customerid : 'abc',
appID : 'xyz',
description : 'this is looooooooooooooooooooooooooooooooooooooooonnnnnnnnnngggggggggggggg text'
 };
constructor(public dialog: MdDialog) { }

openDialog() {

    let dialogRef = this.dialog.open(AddEditAppDetailsComponent, {
                    width: '40%',
                    data: this.data,
                    disableClose: true,
    });

    dialogRef.afterClosed().subscribe( result => {
               console.log(`Dialog Closed: ${result}`);
               this.dialogResult = result;
    });

    dialogRef.updatePosition();
}

材质对话框 html 文件

<form #f="ngForm" (ngSubmit)="onCloseConfirm(f.value)">
    <md-dialog-content>
        <md-grid-list cols="12" rowHeight="70px">
            <md-grid-tile [colspan]="6" [rowspan]="1">
                <md-input-container>
                    <input mdInput ngModel required #customerid=ngModel name="customerid" placeholder="Customer ID" value={{data.customerid}}>
                </md-input-container>
            </md-grid-tile>
            <md-grid-tile [colspan]="6" [rowspan]="1">
                <md-input-container>
                    <input mdInput name="appID" placeholder="App ID" value={{data.appID}}>
                </md-input-container>
            </md-grid-tile>
            <md-grid-tile [colspan]="12" [rowspan]="2">
                <md-input-container>
                    <textarea mdInput placeholder="Description" rows="5" value={{data.description}}></textarea>
                </md-input-container>
            </md-grid-tile>
        </md-grid-list>
    </md-dialog-content>
</form>
<md-dialog-actions>
    <button md-raised-button type="submit" class="saveBTN" (click)="onCloseConfirm()">Save</button>
</md-dialog-actions>

所以在这里我ngModel在输入字段中提到过这样做它不会预先填充value{{ data.customerid }}如果我删除它，因为我已经在第二个输入字段中写入它会填充值。如果我提到ngModel为什么它没有给出预加载值任何人都可以帮助我解决这个问题。

4

1 回答 1

0

从您的组件中，您可以将数据传递给对话框，如下所示：

dialogRef.componentInstance['data'] = { id: 123, name: 'Example' };
于 2017-08-31T10:32:32.553 回答