Angular 在角度8中更改零部件时，复选框不保持选中状态

我试图让我的复选框列表检查，即使当我离开我的组件。 问题是我甚至可以成功保存选中的复选框，但当我离开组件并返回时，它们不会保持选中状态，我不知道我缺少了什么

这是我的按钮，里面有复选框

<mat-button-toggle-group class="row"
                         name="payments">
    <mat-button-toggle class="col">
        <button type="button"
                [ngClass]="{'clicked': toggleState}"
                class="payment-button"
                (click)="togglePayments()">
            <mat-icon aria-label="{{'csa.payments-title' | translate}}">payments</mat-icon>
            <mat-icon>keyboard_arrow_down</mat-icon>
        </button>

        <div *ngIf="show"
             class="toggle-checkbox">
            <mat-checkbox *ngFor="let payment of payments"
                          class="col"
                          [value]="payment"
                          [checked]="paymentState[payment]"
                          (change)="onPaymentsChange($event, payment)"
                          [class.show]="show">
                {{payment | translate}}
            </mat-checkbox>
        </div>
    </mat-button-toggle>
</mat-button-toggle-group>

付款
键盘箭头向下
{{付款|翻译}

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter}
从'@app/api/models/api models'导入{ICategory，ICategoryDto}
@组成部分({
选择器：“付款按钮”，
templateUrl:“payments button.component.html”，
样式URL:['./payments button.component.scss']，
})
导出类PaymentsButtonComponent实现OnInit{
@Input（）付款：ICategory[]
//@Output（）获取清单：EventEmitter
当我单击“基本数据”时，检查返回为空
对我所缺少的东西有什么帮助吗

但是，当我离开组件并返回时，它们不会保持检查状态

这是因为您将支付状态保存在组件中，这也意味着当您的组件被销毁时，会丢失组件拥有的所有数据

解决此问题的一种方法是将状态存储到服务中：

paymentState.service.ts
paymentState:{[key:string]：boolean}
this.paymentState={}
setPaymentItemState（项目，值）{
此.paymentState[项目]=值；
}

payment-button.component.ts
get paymentState（）{
返回this.paymentStateService.paymentState；
}
构造函数（私有paymentStateService:paymentStateService）{}
/* ... */
onPaymentsChange（事件，付款：字符串）{
this.paymentStateService.setPaymentItemState（付款，！this.paymentState[付款]）
}
/* ... */
请参阅有关路线状态的角度文档，因为您希望在离开后保存上一条路线的状态。

或者，您可以检查此解决方案：

第三个选项是创建一个服务，在数据库中保存每个选定选项的选择状态。
为了使原型更容易，我建议您使用。
但是使用服务如何将检查值添加到服务？`[Checked]=“paymentState[payment]”通过使用setPaymentItemState方法。但是使用服务如何将检查值添加到服务？``[选中]=“付款状态[付款]”```
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
import { ICategory, ICategoryDto } from '@app/api/models/api-models'

@Component({
  selector: 'payments-button',
  templateUrl: 'payments-button.component.html',
  styleUrls: ['./payments-button.component.scss'],
})
export class PaymentsButtonComponent implements OnInit {
  @Input() payments: ICategory[]
  // @Output() getChecklist: EventEmitter<any> = new EventEmitter()

  show = false
  paymentState: { [key: string]: boolean }

  constructor() {
    this.paymentState = {}
  }

  ngOnInit() {
    console.log('payments', this.payments)
    /* if (this.payments) {
      this.payments.forEach((payment: string) => {
        console.log(payment)
      })
    } */
    this.payments.forEach((payment: ICategory) => {
      this.paymentState[payment.name] = false
    })
  }

  togglePayments() {
    this.show = !this.show
  }

  /**
   * When users check/unckeck some payments.
   * @param event click event
   * @param payment payment selected
   */
  onPaymentsChange(event, payment: string) {
    this.paymentState[payment] = !this.paymentState[payment]
    // this.getChecklist.emit(this.paymentState[payment])
  }
}

<payments-button [payments]="this.categoriesAndCountries.payments"
                                                     (getChecklist)="onChecked($event)">
                                    </payments-button>