Question

我有一段看起来不错的代码，但是行为却有所不同。我正在尝试获取此代码中用户选择的值：

  <mat-form-field name="selectPagination">
    <mat-select  (selectionChange)="selectAndRoute($event.value)">
      <mat-option  [value]="five">5</mat-option>
      <mat-option  [value]="ten">10</mat-option>
      <mat-option  [value]="twentyFive">25</mat-option>
      <mat-option  [value]="oneHundred">100</mat-option>
    </mat-select>
  </mat-form-field>

，这将输出未定义的内容：

selectAndRoute(value){
  console.log(value);
}

Answer 1

使用字符串时，应为 data_aus = [{'name': '2018,7', 'aus_ct': 13}, {'name': '2018,8', 'aus_ct': 3}, {'name': '2018,9', 'aus_ct': 3}] data_asia = [{'name': '2018,7', 'asia_ct': 10}, {'name': '2018,8', 'asia_ct': 11}, {'name': '2018,9', 'asia_ct': 6}] data_us = [{'name': '2018,7', 'us_ct': 5}, {'name': '2018,8', 'us_ct': 8}, {'name': '2018,9', 'us_ct': 9}, {'name': '2018,10', 'us_ct': 23}] data_uk = [{'name': '2018,7', 'uk_ct': 15}, {'name': '2018,8', 'uk_ct': 7}, {'name': '2018,9', 'uk_ct': 13}] ，而不是 name ，而您可以只使用 data_combined = [ {'name': '2018,7', 'aus_ct': 13, 'asia_ct': 10, 'us_ct': 5, 'uk_ct':15}, {'name': '2018,8', 'aus_ct': 3, 'asia_ct': 11, 'us_ct': 8, 'uk_ct':7}, ...]

value

Answer 2

请勿在{{1}}上使用属性绑定。

mat-option

TS

<mat-form-field name="selectPagination">
  <mat-select [(value)]="selected" (selectionChange)="selectAndRoute()">
    <mat-option  value="five">5</mat-option>
    <mat-option  value="ten">10</mat-option>
    <mat-option  value="twentyFive">25</mat-option>
    <mat-option  value="oneHundred">100</mat-option>
  </mat-select>
</mat-form-field>

StackBlitz

基于选择的路由器

2 个答案: