如何在angular 8中通过id通过get元素更改类，以及如何更改div的样式
如何在angular 8中通过id通过get元素更改类，以及如何更改div的样式
提问于 2020-01-31 05:14:06
如何在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>在更改类之后，我想显示此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>component.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")
}回答 3
Stack Overflow用户
回答已采纳
发布于 2020-01-31 05:26:15
尝试这样做：
在模板中：
<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');
}Stack Overflow用户
发布于 2020-01-31 07:08:23
您还可以通过使用条件来简单地使用angular的ngClass指令。请参阅下面提到的参考https://angular.io/api/common/NgClass
Stack Overflow用户
发布于 2020-01-31 07:16:03
要做到这一点，"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>component.ts
@Component({
...
})
class MyComponent {
isDisplayingDetails = false;
showDetails() {
isDisplayingDetails = true;
}
}有关详细信息，请参阅class binding和*ngIf。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59998238
复制相关文章
相似问题
Spring Boot中的多个DataSource和JdbcTemplate (> 1.1.0)
Spring Boot找不到DataSource for JdbcTemplate
Spring Boot DataSource配置
Spring Boot排除DataSource配置
在spring boot中为liquibase配置dataSource
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
