Question

我有3个带有Mat-slider-toggle的Mat选项卡。在第三个mat选项卡上，使用ngIf删除了mat-slider-toggle。但是，这似乎重置了垫滑块上的检查值。在前两个选项卡之间来回移动时，滑块值保持良好，但第三个选项卡始终会重置mat-slider-toggle。如果在“垫子”选项卡1上选择了滑块，则移至“垫子”选项卡3，然后再返回至“垫子”选项卡1，则滑块将移回至未选中状态。

tab 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>

tab content 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;
  }
 }

我当前的问题是，因为我有三个@Input变量，所以ngOnChanges被调用了三次，但是在ngOnChanges（）第一次执行后，isClosedTabOne / Two变量从true / false变为undefined。我不知道为什么将该值设置为undefined。

任何帮助或建议将不胜感激。

Answer 1

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

更改“ Mat”选项卡时，“ Mat”滑块切换[选中]将重置

1 个答案: