data-toggle="buttons" 在 Angular 中不起作用

Question

data-toggle="buttons" 在 Angular 中不起作用。 当我尝试使用 data-toggle="buttons" 时，它没有在事件函数中传递值。 甚至提交功能也不起作用。 我无法找出问题所在。 请在下面找到代码：

<!-- include the CSS files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- include the JavaScript files -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

app.component.html

<div class="form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons">
       <form [formGroup]="formCheck" (ngSubmit)="submitFormCheck()" novalidate>

             <div style="display: inline-block;" *ngFor="let chip of message.multi; let i=index">
              <label class="btn btn-light">
                <input type="checkbox" class="form-check list-group-item"  [value]="chip.chip"  (change)="onCheckboxChange($event)" />
                          {{chip.chip}}
              </label>
           </div>
                    
         <button type="submit">Submit</button>
        <!-- <input type="submit" value="Submit"> -->
    </form>
</div>

this.formCheck = this.formBuilder.group({
      checkArray: this.formBuilder.array([])
    })



onCheckboxChange(e) {
    const checkArray: FormArray = this.formCheck.get('checkArray') as FormArray;
    console.log(checkArray);
    if (e.target.checked) {
      checkArray.push(new FormControl(e.target.value));
    } else {
      let i: number = 0;
      checkArray.controls.forEach((item: FormControl) => {
        if (item.value == e.target.value) {
          checkArray.removeAt(i);
          return;
        }
        i++;
      });
    }
  }
  submitFormCheck() {
    console.log(this.formCheck.value)
  }

没有data-toggle="buttons"它可以工作，但样式问题即将到来。

帮我解决这个问题。

谢谢

Answer 1

你可以试试data-toggle="button"而不是 'buttons' 吗？