小编Rob*_*tow的帖子

尝试拥有一排3个面板,其中高度根据内容扩展,并且它们都正确对齐.左侧面板中将包含一个图形,右侧的两个图形将具有与左侧图形一起使用的表格.

此工作的示例是此模板: 单击此处以示例

<div class="row">
    <div class="col-md-8">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">Panel content
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">Panel content
            </div>
        </div>
    </div>
</div>

我在尝试使Bootstrap 4复选框与全选并取消选择6+中的所有选项时遇到问题。当我在此处使用原始代码时，它可以正常工作：http : //www.angulartutorial.net/2017/04/select-all-deselect-all-checkbox.html
但问题是Bootstrap使用其他事件单击他们的复选框。有人对此有解决方案吗？

<div class="form-check">
    <input class="form-check-input" type="checkbox" (change)="selectAll()">
    <label class="form-check-label">
        Select All
      </label>
</div>
<div class="form-check" *ngFor="let n of names">
    <input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="selectedNames" (change)="checkIfAllSelected()">
    <label class="form-check-label">
        {{n.name}}
      </label>
</div>

和TS：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {
  title = 'Checkbox';
  names: any;
  selectedAll: any;
  constructor() {
    this.title = "Select all/Deselect all checkbox - Angular 2";
    this.names = [
      { name: …