Присвоение значения по умолчанию 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;
}

Если бы кто-нибудь мог мне помочь, это было бы здорово!

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