通过单击角度更改列大小

Question

我的这个页面有两个按钮，除以两个 clo-md-6 ： 我希望当我单击按钮时，第一个按钮变为 col-md-9 和另一个 col-md-3 并且对于反向也是如此

我不知道如何在 Angular 中做到这一点

这是我的 HTML：

<div class="container-fluid">
    <div class="row">
        <!-- $("#btn1").parentElement.parentElement.className= "col-3"-->
        <!--------------------THE FIRST BUTTON----------------------------->
        <div class="col-xl-6" [class.col-xl-9]="isclicked">
            <div class="card">
                <button type="button" id="btn1" class="btn btn-primary" (click)="AfficherRecherche()">Agent professionnelle</button>
                <div class="card-body" *ngIf="isclicked">
                    <h4 class="header-title mt-0 mb-4">Agent Professionnelle</h4>
                    <aw-wizard>
                        <aw-wizard-step class="sw-main sw-theme-default">
                            <form [formGroup]="searchForm">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group row mb-3">
                                            <input type="text" class="form-control" (keyup)="searchTerm.next($event)" formControlName="search" placeholder="Rechercher ..." (input)="search()" [(ngModel)]="searchText" />
                                            <div *ngIf="loading">
                                                <p class="search-message">Searching</p>
                                                <div class="lds-ellipsis">
                                                    <!-- -------------------------------THE SEOND BUTTON------------------------------------------------------------------ -->
                                                    <div class="col-xl-6" [class.col-xl-3]="isclicked">
                                                        <div class="card">
                                                            <div class="btn-group">
                                                                <button id="btn2" type="button" class="btn btn-primary" (click)="AfficherAgentpar()">Agent Partculier</button>
                                                            </div>

这是我的组件：

 AfficherRecherche() {
    this.isclicked = !this.isclicked;
  }

  AfficherAgentpar() {
    this.agentparclick = !this.agentparclick;
  }

Answer 1

您应该在点击时触发类。比如：

在你的 TS 文件中用布尔值声明一个变量：

public resize: boolean;

在您的 HTML 中，您有 2 个 div 和一个按钮：

<div class="clo-md-6" [class.col-md-9]="resize"></div>
<div class="clo-md-6" [class.col-md-3]="resize"></div>
<button (click)="resize != resize">Trigger me</button>

会发生以下情况：当按钮被单击时，它会更改我们的 resize 布尔值。由于默认情况下这是 false，因此它将触发为 true。当resize 为真时，第一个div 将被分配col-md-9 类，第二个div 将被分配col-md-3 类。如果再次单击该按钮，则 div 将恢复为 50/50。