Question

给定以下使用mat-select

的Angular组件

export enum AllValues {
  VALUE_A = "A",
  VALUE_B = "B",
  VALUE_C = "C",
}

@Component({
  selector: 'my-app',
  template: `
    <mat-form-field>
      <mat-select ([ngModel])="myValue">
        <mat-option *ngFor="let o of valueOptions" value="{{o}}">{{o}}</mat-option>
      </mat-select>
    </mat-form-field>
    <p> Selected value: {{myValue}} </p>
    `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  myValue: AllValues = AllValues.VALUE_B;
  valueOptions = Object.keys(AllValues);
}

如何在UI中的mat-select中显示myValue的初始值？该值未以代码的当前状态显示。

关注df.boxplot()以获取完整代码和正在运行的演示。

Answer 1

问题：

此处SELECT DISTINCT `date`,`type` FROM `chart_data` WHERE `import_code` = 'XYZ' AND (`date` BETWEEN 'sdate' AND 'edate')值和ngModel选项值都不同，这就是您没有获得选定值的原因

组件方：

select

模板方：

// add this line
allValues = AllValues;

<强> WORKING DEMO

使用初始值进行mat-select

1 个答案: