时间戳

首页 > 解决方案 > 在 Angular 8 中更改组件时复选框不保持选中状态

angular - 在 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>

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>

getChecklist 除了返回 true 或 false 之外没有做任何事情。 https://imgur.com/a/KyzSArF 当我单击基本数据时，支票将返回为空关于我缺少什么的任何帮助？

标签： angular

解决方案

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

发生这种情况是因为您将付款状态保留在组件中，这也意味着当您的组件被销毁时，您会丢失组件拥有的所有数据。

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

paymentState.service.ts

paymentState: { [key: string]: boolean }

this.paymentState = {}

setPaymentItemState (item, value) {
    this.paymentState[item] = value;
}

付款按钮.component.ts

get paymentState () {
    return this.paymentStateService.paymentState;
}

constructor (private paymentStateService: PaymentStateService) { }

/* ... */

onPaymentsChange(event, payment: string) {
    this.paymentStateService.setPaymentItemState(payment, !this.paymentState[payment])    
}

/* ... */

推荐阅读