Question

在这种情况下，我正在* ngFor内使用Angular Material <mat-slide-toggle'>标签。页面加载时，它访问我的数据库，以查看应检查和不检查。他们中的一小部分应该（大约20％），因此默认情况下未选中它们。当我的API提供db的响应时，angular必须获取必须检查的切换ID，然后进行检查。我正在使用此逻辑来检查一些复选框，并且它可以工作，但是使用<mat-slide-toggle>时，Jquery似乎无法交互。

这就是我的做法

滑块：

<div id="table" *ngFor="let data of User; let i = index">
      <mat-slide-toggle  
      disabled
      [id]='data.code15'
      (change)=toggle(data.code15)
      color=primary 
      class="status">Active
      </mat-slide-toggle>
</div>

应该检查它们的逻辑（我保证其工作的100％，只是无法检查它们，但可以相应地console.log他们的ID）：

for(var i = 0 ; i < this.IntArray.length ; i++){
  if(this.IntArray[i].status == 0){
    console.log("Toggle's ID: " + $("#"+this.IntArray[i].user.toString()).attr('id')); 
    //this is the correct console log
    $("#"+this.IntArray[i].code15.toString()).prop('checked', true); 
    //this should check them (code15 is the ID of each toggle)
  }
}

这里的问题是，以某种方式切换不会响应jQuery命令（而我的复选框执行时，逻辑非常相似）。我无法查看切换开关。还有其他办法吗？

顺便说一句，使用<mat-slide-toggle [checked]=foo>的问题是全局变量'foo'将不会获得任何值，因为该页面至少需要半秒钟才能从数据库中获得响应（这相当完整）。

我在这里没有其他选择，我真的需要切换，因为它比单选按钮更“用户友好”和时尚，并且更容易在CSS中处理。

有什么提示吗？接受jQuery或JS ...

Answer 1

您可以执行以下操作来完成此操作……这将是Angular / JS而不是jQuery

我不知道从db返回的数据格式，因此我做了一个简单的模拟数组以进行演示。

我假设您的db数组中有一些值确定是否应检查滑块...在这里，我只使用键为checked的布尔值

 User = [
    { id: 1, checked: true },
    { id: 2, checked: false },
    { id: 3, checked: false },
    { id: 4, checked: true },
    { id: 5, checked: false },
    { id: 6, checked: false },
  ]

然后我使用@ViewChildren来获取DOM上的所有滑块

import { MatSlideToggle } from '@angular/material'
@ViewChildren(MatSlideToggle) toggleArray

ViewInit循环遍历DOM上的滑块数组并将它们与User数组进行比较，然后设置需要检查的滑块。

我在这里checked之后将滑块设置为ViewInit，当响应从数据库返回时，您可以执行此逻辑，并且其工作原理相同。

 ngAfterViewInit() {
    this.toggleArray.toArray().forEach((el) => {
      let i = this.User.findIndex(u => el.id == u.id)
      if (this.User[i].checked) {
        el.checked = true;
      }
    })
  }

Stackblitz

https://stackblitz.com/edit/angular-idbj9c?embed=1&file=app/slide-toggle-overview-example.ts

（角度）使用jQuery（或纯JS）检查特定的mat-slide-toggles

1 个答案: