级联下拉菜单编辑不能在角度工作吗? [英] Cascading dropdown Edit is not working in angular?

问题描述

这是我的对象

const ELEMENT_DATA: Element[] = [
    {id: 1, name: 'Hydrogen', symbol: 'H'},
    {id: 2, name: 'Hydrogen',  symbol: 'H1'},
    {id: 3, name: 'Helium',  symbol: 'He'}
];

使用 Edit 按钮显示在数据表中，如下所示:

当我点击编辑时(例如，我点击了 Hydrogen )，它应该填充为
name: 'Hydrogen', symbol: 'H'.

但是现在我的符号列表下拉列表为空.

演示

当我单击添加"按钮时，将弹出一个带有两个下拉列表的窗口:元素列表和符号列表.基于元素的名称将出现符号列表.

现在，当我单击数据表中的编辑"按钮时，应该在弹出窗口中填充该特定行.我该怎么办?

html

<form  [formGroup]="addTaskForm"  (ngSubmit)="save()" >
    <mat-form-field>
    <mat-select formControlName="name" placeholder="Element List"  (selectionChange)="elementSelectionChange($event)">
        <mat-option *ngFor="let element of Elements" [value]="element.name">
        {{ element.name }}
        </mat-option>
    </mat-select>
    </mat-form-field>
    <mat-form-field>
    <mat-select  formControlName="symbol"  placeholder="Symbol List">
        <mat-option *ngFor="let element of selectedElementSymbol" [value]="element.symbol">
        {{ element.symbol }}
        </mat-option>
    </mat-select>
    </mat-form-field>

    <div mat-dialog-actions>

    <button mat-button (click)="onNoClick()">Cancel</button>
    <button type="submit"  mat-button cdkFocusInitial>Add</button>
    </div>
</form>

解决方案

您应该在对话框中添加每个值后更新datasource，像这样更改您的save()函数:

save() {

    const data = this.data.originalform.dataSource.data;
    this.addTaskForm.value["id"]=data.length+1
    data.push(this.addTaskForm.value);
    this.data.originalform.dataSource=new MatTableDataSource<Element>(data); 
    console.log('working');
    console.log(this.addTaskForm.value);
  }

并且不要忘记从此向父对象originalform添加引荐来源网址:

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { element: element,originalform:this }
    });

希望这会有所帮助:)

通过调用此评论，我在以下中更新了小提琴适应分页.

添加分页器图形，如下所示:

this.data.originalform.dataSource.paginator=this.data.originalform.paginator;

This is my object:

const ELEMENT_DATA: Element[] = [
    {id: 1, name: 'Hydrogen', symbol: 'H'},
    {id: 2, name: 'Hydrogen',  symbol: 'H1'},
    {id: 3, name: 'Helium',  symbol: 'He'}
];

which is displayed in datatable with Edit buttons, like so:

When I click Edit (for example I clicked Hydrogen) it should populate with
name: 'Hydrogen', symbol: 'H'.

But now I am getting the Symbol List dropdown empty.

Demo

When I click the Add button, a pop up will come with two dropdowns: Element List and Symbol List. Based on the Element name Symbol List will come.

Now when I click the Edit button in datatable, that should populate that particular row in the popup. How can I do this?

html

<form  [formGroup]="addTaskForm"  (ngSubmit)="save()" >
    <mat-form-field>
    <mat-select formControlName="name" placeholder="Element List"  (selectionChange)="elementSelectionChange($event)">
        <mat-option *ngFor="let element of Elements" [value]="element.name">
        {{ element.name }}
        </mat-option>
    </mat-select>
    </mat-form-field>
    <mat-form-field>
    <mat-select  formControlName="symbol"  placeholder="Symbol List">
        <mat-option *ngFor="let element of selectedElementSymbol" [value]="element.symbol">
        {{ element.symbol }}
        </mat-option>
    </mat-select>
    </mat-form-field>

    <div mat-dialog-actions>

    <button mat-button (click)="onNoClick()">Cancel</button>
    <button type="submit"  mat-button cdkFocusInitial>Add</button>
    </div>
</form>

解决方案

You shoule update datasource after each value added from the dialog, change your save() function like this:

save() {

    const data = this.data.originalform.dataSource.data;
    this.addTaskForm.value["id"]=data.length+1
    data.push(this.addTaskForm.value);
    this.data.originalform.dataSource=new MatTableDataSource<Element>(data); 
    console.log('working');
    console.log(this.addTaskForm.value);
  }

And to not forget to add a referer to the parent object originalform from this:

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { element: element,originalform:this }
    });

Hope this helps:)

Edit:

By call of this comment, i updated the fiddle in the following to fit the paginating in.

Adding paginator figures as following:

this.data.originalform.dataSource.paginator=this.data.originalform.paginator;

这篇关于级联下拉菜单编辑不能在角度工作吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！