angular - 从对象分配 mat-button-toggle-group 的默认值

Question

我正在尝试从一个对象设置初始value值mat-button-toggle-group，但我似乎无法设置它。

这是我的模板：

<mat-button-toggle-group
   #stateFilters="matButtonToggleGroup"
   class="calendar-view-toggle"
   [value]="postsFilters.state"
   (change)="changePostsStateFilter(stateFilters.value)"
>
   <mat-button-toggle [value]="[postState.draft]">Drafts</mat-button-toggle>
   <mat-button-toggle
     [value]="[postState.awaitingApproval,postState.approvedFirst,postState.approvedSecond]"
   >
       Pending Approval
   </mat-button-toggle>
   <mat-button-toggle [value]="[postState.approved]">Approved</mat-button-toggle>
</mat-button-toggle-group>

这是我的 TS 文件：

export class CalendarListComponent {
    postsFilters: IPostFilters = {
        state: [EPostState.draft],
        onlyToBeApprovedByMe: false,
    };

    changePostsStateFilter(states: EPostState[]) {
        this.postsFilters.state = states;
        this.loadPosts(this.postsFilters.state, 0);
    }
}

export interface IPostFilters {
  state?: EPostState[];
  onlyToBeApprovedByMe?: boolean;
}

如果有人可以给我一些帮助，那就太好了！

标签： angulartypescriptangular-material

Answer 1

您可以使用 enum 以获得更好的可读性

您可以根据结果使用适当的值更新 selectedState

export enum PostEnum {
    Option1,
    Option2,
    Option3
}

export class CalendarListComponent {
    postEnum: typeof PostEnum = PostEnum;
    selectedState = PostEnum.Option1;
}

<mat-button-toggle-group
   [value]="selectedState"
   (change)="changePostsStateFilter()">
   <mat-button-toggle [value]="postEnum.Option1">Drafts</mat-button-toggle>
   <mat-button-toggle [value]="postEnum.Option2">Pending Approval</mat-button-toggle>
   <mat-button-toggle [value]="postEnum.Option3">Approved</mat-button-toggle>
</mat-button-toggle-group>

https://stackblitz.com/edit/mat-button-toggle-group