[英]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.