Mat slider toggle [checked] 在更改 Mat Tab 时重置

Question

我有 3 个带有垫滑块切换的垫片。在第三个 mat-tab 上，使用 ngIf 删除了 mat-slider-toggle。然而，这似乎重置了 mat-slider 上的选中值。在前两个选项卡之间来回移动，滑块值保持良好，但第三个选项卡始终重置 mat-slider-toggle。如果在垫子选项卡 1 上选择了滑块，请移动到垫子选项卡 3，然后返回垫子选项卡 1，滑块将移回未选中状态。

选项卡 component.html

<div class="container">
 <mat-tab-group
  (selectedTabChange)="focusChange($event)"
  [selectedIndex]="searchIndex"
  class="selected-tab-{{tabGroup.selectedIndex}}" #tabGroup>
 <mat-tab label="tab 1">
  <os-case-list  [data]="'myCases'" [active]="active"></os-case-list>
 </mat-tab>
 <mat-tab label="tab 2">
  <os-case-list [data]="'allCases'" [active]="active"></os-case-list>
 </mat-tab>
 <mat-tab disabled>
  <ng-template mat-tab-label>
      <mat-form-field>
        <input matInput type="text" class="searchInput" placeholder="search" [(ngModel)]="searchTextTyping" (keydown)="stopProp($event)" onfocus="this.value=''">
      </mat-form-field>
      <button mat-button class="searchBtn" (click)="searchCase()"><mat-icon>search</mat-icon></button>
  </ng-template>
  <os-case-list [data]="'seachText'" [active]="active" [searchText]="searchText"></os-case-list>
</mat-tab>

标签内容component.html

  <div class="actions">
   <div>
    <mat-slide-toggle *ngIf="active !== 2" [checked]="sliderChecked" (change)="getClosedCases($event)">{{ 'CASES.closed' | translate }}</mat-slide-toggle>
   <h4 *ngIf="active === 3 && noSearchResults === false">{{ 'SEARCH.searchResults' | translate }}</h4>
   <h4 *ngIf="noSearchResults === true">{{ 'SEARCH.noSearchResults' | translate }}</h4>
 </div>

选项卡内容component.ts 具有我当前失败的逻辑来保留 mat-slider-toggle 检查值的函数

  isClosedTabOne: boolean;
  isClosedTabTwo: boolean;
  sliderChecked: boolean;

  ngOnChanges(changes) {
   if (changes.active.currentValue === 0) {
    this.isClosedTabOne = this.sliderChecked;
    console.log('SLIDERCHECKED', this.sliderChecked)
   }
   if (changes.active.currentValue === 1) {
    this.isClosedTabTwo = this.sliderChecked;
    console.log('SLIDERCHECKED', this.sliderChecked)
   } 
  }

  getClosedCases(event) {
   if (this.active === 0) {
     this.isClosedTabOne = event.checked;
  } else if (this.active === 1) {
   this.isClosedTabTwo = event.checked;
  }
 }

我当前的问题是 ngOnChanges 被调用了三次，因为我有三个 @Input 变量，但是在第一次执行 ngOnChanges() 之后，isClosedTabOne/Two 变量从 true/false 变为未定义。我不明白为什么将该值设置为未定义。

如有任何帮助或建议，我们将不胜感激。

Answer 1

我在您的代码中的任何地方都没有看到切换的模型 sliderChecked 正在更新 - 它只被读取过。因此，任何时候发生更改周期（例如切换选项卡时），滑块都会重置为原始未更改的 sliderChecked 值。您需要在使用时更新切换的模型 - 在您的更改函数 getClosedCases() 中执行此操作或使用 [(ngModel)]="sliderChecked" 绑定读写而不是只读 [checked]="sliderChecked".

Mat slider toggle [checked] 在更改 Mat Tab 时重置

Mat slider toggle [checked] resets when change Mat Tab

angular-material

angular-material2

angular