[英]How to use Hidden in angular5?
我正在使用angular5作为前端,使用spring-boot作为后端,在下面的代码中,我列出了管理员可以接受或不接受的干预措施。
由于这个原因,我使用了hidden属性,因此当管理员验证他只能得到“接受”时,我试图这样做,但是我遇到了一些问题。
这是我使用的代码。
如果c.valid为true,则显示“已接受”按钮,否则应显示“未接受”按钮。
文件干预.component.html
<!--/.col-->
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Les interventions
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>Numéro</th>
<th>objet</th>
<th>date</th>
<th>Etat</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of pageIntervention?.content">
<td>{{c.id}}</td>
<td>{{c.objet}}</td>
<td>{{c.date}}</td>
<td>
<button type="button" [hidden]="c.valid" (click)="validate(c.id)">Not accepted</button>
<button type="button" [hidden]="!c.valid">Accepted</button>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item" [ngClass]="{'active':i==currentPage}" *ngFor="let p of pages ; let i=index">
<a class="page-link" (click)="gotoPage(i)">{{i}}</a>
</li>
</ul>
</div>
</div>
</div>
文件Intervention.component.ts
export class InterventionComponent implements OnInit {
pageIntervention:any;
pages:Array<number>;
currentPage:number=0;
page:number=0;
size:number=5;
id:number;
constructor(private intervService: InterventionService,
private authService: AuthenticationService ) { }
ngOnInit() {
this.id = this.authService.getAuthenticatedUserId();
this.Allinterventions();
}
Allinterventions(){
this.intervService.getAllinterventions(this.page,this.size,this.id)
.subscribe((data:any)=>{
this.pageIntervention = data;
},err=>{
console.log('there is an error ');
})
}
validate(id:number){
// here i want to modify c.valid so it changes from false to true .
this.intervService.ValidateIntervention(id); // i call the service
method to send the update Request to the API rest (spring).
}
gotoPage(i:number){
this.currentPage = i;
this.Allinterventions();
}
}
我可能要做什么? 如果是的话,怎么做呢?
编辑说明:
管理员可以获取他可以接受或不接受的干预列表(有效是spring干预实体中的布尔属性),我想要的是,如果有效为假,则管理员将仅看到“未接受”,那么他可以单击此按钮,以便他可以接受它,因此在验证方法中,我应该将c.valid的值从false更改为true,这样,只有接受的按钮才会出现在admin上,
Simply use *ngIf as below
<button type="button" *ngIf="c.valid; else accepted" (click)="validate(c.id)">Not accepted</button>
<ng-template #accepted>
<button type="button" >Accepted</button>
<ng-template>
好的,请尝试使用ngIf
因为逻辑有些混乱,并且在函数validate
直接发送对象引用并进行修改。
ngIF
<button type="button" *ngIf="c.valid" (click)="validate(c)">Not accepted</button>
<button type="button" *ngIf="!c.valid">Accepted</button>
[隐]
<button type="button" [hidden]="!c.valid" (click)="validate(c)">Not accepted</button>
<button type="button" [hidden]="c.valid">Accepted</button>
零件
validate(ref: any){
// here i want to modify c.valid so it changes from false to true .
// i want to change it in pageIntervention first and then call the api
rest to change it in database .
//this.intervService.ValidateIntervention(id); // i call the service
//method to send the update Request to the API rest (spring).
ref.valid = !ref.valid;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.