如何通过 Angular 8 中的 id 获取元素来更改类并更改 div 的样式

Question

如何通过 Angular 8 中的 getElementBy id 添加和删除类。 当用户单击详细信息图标时，我想删除类“col-md-12”并添加“col-md-6”。

还可以更改另一个 div 的样式，例如 display: block。

component.html

 <div class="col-md-12" id="demo">
      <div class="example-container mat-elevation-z8 mt-5">
        <table class="table table-striped">
          <tbody>
            <tr>
              <th>Points</th>
              <th>###</th>
            </tr>
            <tr *ngFor="let user of usersArray" >
              <td>
                {{user.score}}
              </td>
              <td>
                <i class="material-icons text-primary pointer" (click)="details()">account_circle</i>
              </td>
            </tr>
          </tbody>

        </table>

      </div>
    </div>

换完class之后，我要显示这个div

  <div class="col-md-6" style="display: none;" >
        <div class="userDetails">
            <img src="../../assets/images/user.png">
            <span class="mx-3"> <b>Shubham Patil</b></span>
            <div class="example-container mat-elevation-z8 mt-4">
              <table class="table table-striped rounded">
                <tbody>
                  <tr>
                    <th>Topics</th>
                    <th>Points</th>
                  </tr>
                  <tr >
                    <td>
                      Why me
                    </td>
                    <td>
                      300
                    </td>
                  </tr>
                </tbody>
              </table>
              </div>
        </div>
    </div>

组件.ts

element: HTMLElement;

 details(){
    this.element = document.getElementById('demo').removeClass("col-md-12") as HTMLElement;
    this.element = document.getElementById('demo').addClass("col-md-6") as HTMLElement;
    console.log("change")
}

Answer 1

执行此操作的“Angular”方法是使用 Angular 的模板语言将组件文件中的变量绑定到模板。有关更多信息，请参阅 Angular 文档中的 template syntax。

component.html

 <div id="demo"
    [class.col-md-12]="!isShowingDetails"
    [class.col-md-6]="isShowingDetails"> <!--"[class.my-class-name] syntax to dynamically add or remove classes based on if the value assigned to the property is true/false -->
      <div >
        ...
            <tr *ngFor="let user of usersArray" >
              <td>
                <i class="material-icons" (click)="showDetails()">account_circle</i>
              </td>
            </tr>
         ...
      </div>
    </div>
    <div class="col-md-6" *ngIf="isShowingDetails"> <!--ADDED *ngIf directive to show and hide details HTML -->
        <div class="userDetails">
            ...
        </div>
    </div>

组件.ts

@Component({
    ...
})
class MyComponent {
    isDisplayingDetails = false;

    showDetails() {
        isDisplayingDetails = true;
    }

}

请参阅class binding 和*ngIf 了解更多信息。

Answer 2

您还可以通过使用条件来简单地使用 Angular 的 ngClass 指令。请参阅下面提到的参考https://angular.io/api/common/NgClass

Answer 3

试试看：

在模板中：

<div class="col-md-12" id="demo" #demo>
   ...
   <td>
    <i class="material-icons text-primary pointer" (click)="details(demo)">account_circle</i>
   </td>
   ...
</div>

在.ts中

details(elem: HTMLElement) {
  console.log(elem.className, 'before');
  elem.className = 'col-md-6';
  console.log(elem.className, 'after');
}