如何使用隐藏在angular5中?
How to use Hidden in angular5?
我正在使用 angular5 作为前端,spring-boot 作为后端,在下面的代码中我有一个管理员可以接受或不接受的干预列表。
出于这个原因,我使用了隐藏属性,因此当管理员验证他只能获得 'accepted' 时,我尝试这样做,但我遇到了一些问题。
这是我使用的代码。
如果 c.valid 为真,'Accepted' 按钮出现,否则 'Not Accepted' 按钮应该出现。
文件intervention.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();
}
}
这可能是我正在尝试做的事情吗?如果是的话,你知道怎么做吗?
编辑
解释:
管理员可以获得他可以接受或不接受的干预列表(valid 是 spring 中干预实体中的布尔属性),我想要的是如果 valid 为 false 那么管理员将看到只有 'Not accepted' ,然后他可以单击此按钮以便接受它,因此在验证方法中我应该将 c.valid 的值从 false 更改为 true ,这样只有接受的按钮才会出现管理员,
好吧,用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;
}
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>
我正在使用 angular5 作为前端,spring-boot 作为后端,在下面的代码中我有一个管理员可以接受或不接受的干预列表。
出于这个原因,我使用了隐藏属性,因此当管理员验证他只能获得 'accepted' 时,我尝试这样做,但我遇到了一些问题。
这是我使用的代码。
如果 c.valid 为真,'Accepted' 按钮出现,否则 'Not Accepted' 按钮应该出现。
文件intervention.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();
}
}
这可能是我正在尝试做的事情吗?如果是的话,你知道怎么做吗?
编辑 解释:
管理员可以获得他可以接受或不接受的干预列表(valid 是 spring 中干预实体中的布尔属性),我想要的是如果 valid 为 false 那么管理员将看到只有 'Not accepted' ,然后他可以单击此按钮以便接受它,因此在验证方法中我应该将 c.valid 的值从 false 更改为 true ,这样只有接受的按钮才会出现管理员,
好吧,用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;
}
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>