在我的组件中将枚举转换为 material select

Question

现在我在枚举方面遇到了一些问题。我想在具有枚举值的组件中制作 mat-select，但我不明白，这怎么可能。我试过了，但没有任何效果

我的ts组件代码

    import { Component, OnInit } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms';
    import { select, Store } from '@ngrx/store';
    
    import { Currency } from 'src/app/enums/CurrencyType';
    import { Edition } from 'src/app/enums/EditionType';
    import { Author } from 'src/app/models/Author';
    
    import { getAuthorsList } from 'src/app/store/author/author.actions';
    import { getAuthorsSelector } from 'src/app/store/author/author.selector';
    
    @Component({
      selector: 'app-printing-edition-item',
      templateUrl: './printing-edition-item.component.html',
      styleUrls: ['./printing-edition-item.component.css']
    })
    export class PrintingEditionItemComponent implements OnInit {
    
      type: Edition -- my enum
    
      constructor(private store: Store) {
       }
    }

我的枚举

export enum Edition{
  None = 0,
  Journal = 1,
  Newspaper = 2,
  Book = 3
}

我在 HTML 中的尝试：

     <mat-form-field>
              <mat-label>Category</mat-label>
              <mat-select formControlName="type">
                <mat-option *ngFor="let item of type" value="item">type[item]</mat-option>
              </mat-select>
    </mat-form-field>

Answer 1

你可以使用类似的东西：

export class PrintingEditionItemComponent implements OnInit {

    type = Edition;
    keys: string[];
    
    constructor(private store: Store) { }

    ngOnInit() {
        this.keys = Objects.keys(this.type).filter(Number);
        this.selectedEdition = Edition.Foo;
    }
}

在您的模板中：

<mat-form-field>
    <mat-label>Category</mat-label>
    <mat-select formControlName="selectedEdition">
        <mat-option *ngFor="let item of keys" value="item">type[item]</mat-option>
    </mat-select>
</mat-form-field>

在我的组件中将枚举转换为 material select

Convert enum to material select in my component

enums

angular

angular-material-7