Question

我想从md对话框中读取下拉列表的值。我无法阅读。我的代码是：

右面板component.ts

import { Component, OnInit, ViewContainerRef,ViewChild } from 
 '@angular/core';
import {MdDialog} from "@angular/material";
import {MdDialogRef} from "@angular/material";
import {ServersListDialogComponent} from "../servers-list-dialog/servers-
 list-dialog.component";
import {DownTimeGraphComponent} from "../down-time-graph/down-
 time-graph.component";
import any = jasmine.any;

@Component({
 selector: 'app-rightpanel',
 templateUrl: './rightpanel.component.html',
 styleUrls: ['./rightpanel.component.css']
})
export class RightpanelComponent implements OnInit {
  receivedData:Array<any> = [];
  dialogRef: MdDialogRef<any>;
  componentData = null;

  constructor(public dialog: MdDialog) {}

  ngOnInit() {
  }
  transferDataSuccess($event) {this.openDialog($event.dragData.valueOf().id);  }
 openDialog(id) {
 if(id>=1 && id<=8) {
  this.dialogRef = this.dialog.open(ServersListDialogComponent, {
    disableClose: false
  });
 } else {
  this.dialogRef = this.dialog.open(LogDialogComponent, {
    disableClose: false
  });
 }

 this.dialogRef.afterClosed().subscribe(result => {

  console.log('result: ' + result);
  console.log("after close dialog....");
  if(result == "yes") {
      if(graphName == "Down Time") {
        this.componentData = {
          component: DownTimeGraphComponent,
          inputs: {
            showNum: 9
          }
        };
      } 
  }
  this.dialogRef = null;
});

} }

服务器一览dialog.component.ts

import { Component,OnInit} from '@angular/core';
import {MdDialogRef} from "@angular/material";
import {ServerItem} from '../server-item';
import {GetServersListService} from '../get-servers-list.service';
@Component({
 selector: 'app-servers-list-dialog',
 templateUrl: './servers-list-dialog.component.html',
 styleUrls: ['./servers-list-dialog.component.css']
 })
 export class ServersListDialogComponent implements OnInit {
  serverItems : ServerItem[];
 constructor(public dialogRef: 
 MdDialogRef<ServersListDialogComponent>,private 
 service:GetServersListService) { }

 ngOnInit() {
   this.service.getServerItemList().subscribe(lst =>this.serverItems=lst);
}

}

服务器一览dialog.component.html

<p>
  servers-list-dialog works!
</p>
Select server: <select name="serverid" id="server_list">
 <option *ngFor="let serverItem of serverItems" value="{{serverItem.id}}">
 {{serverItem.name}}</option>
</select>
<p></p>
<button type="button" (click)="dialogRef.close('yes')">Yes</button>
<button type="button" (click)="dialogRef.close('no')">No</button>

我想在right-panel.component.ts文件中读取下拉列表值我是角度2的新手。请给我解决方法如何从对话框中读取下拉列表值。

Answer 1

您可以使用属性绑定[]来实现此目的。

尝试更改server-list-dialog.component.html -

<option *ngFor="let serverItem of serverItems" value="{{serverItem.id}}" [dropdownvalue]="serverItem">

然后，您可以在Input中声明right-panel-component.ts属性，如下所示：

export class RightpanelComponent implements OnInit {

@Input() dropdownvalue:any;
//Rest code remains the same
}

请务必将Input导入import { Input } from '@angular/core'。

Answer 2

        <select name="serverid" id="server_list [ngModel]="serverItems[0]">
          <option *ngFor="let serverItem of serverItems" [value]="serverItem.id">{{serverItem.name}}</option>
        </select>

尝试修改上面的html代码。

如何从角度2的对话框中读取下拉列表值

2 个答案: