我只是為沒有任何評論的用戶顯示無評論訊息。當前，當按下 Review 按鈕時，它會顯示有評論的用戶的評論，但如果任何沒有任何評論的用戶，按下 Review Button 時不會顯示任何內容。
這是代碼
<div class="checkbox-item mt-2" (click)="getReviews(item.offer_by.id)">
<button type="button" class="btn btn-outline-secondary" >Reviews</button>
</div>
<div class="?ontainer" *ngFor="let items of reviews" >
<div class="row" *ngIf="items.tasker_id == item.offer_by.id">
<h6>{{items.name}}</h6>
<div class="emVaRl">
<div class="lnfldP">
<svg width="16" height="16" class="elJCm" viewBox="0 0 24 24" *ngFor='let in of
counter(items.review_rating) ;let i = index'>
<path d="M16.2 8.16l4.74.73a1.23 1.23 0 01.67 2.11l-3.46 3.28a1.23 1.23 0 00-.37 1.1l.77 4.68a1.24 1.24 0 01-1.82 1.29L12.5 19.1a1.28 1.28 0 00-1.16 0l-4.27 2.17A1.25 1.25 0 015.27 20l.85-4.68a1.19 1.19 0 00-.34-1.09l-3.41-3.4a1.23 1.23 0 01.71-2.1l4.75-.64a1.26 1.26 0 00.95-.67l2.16-4.24a1.25 1.25 0 012.24 0l2.09 4.28a1.22 1.22 0 00.93.7z">
</path>
</svg>
</div>
</div>
<p>({{items.review}})</p>
<hr>
</div>
</div>
.ts 代碼
review(data: any): boolean {
data['job_id'] = this.jobOffer.id;
data['tasker_id'] = this.jobOffer.assign_to_id;
this.ds.addReview(data).subscribe((resp: any) => {
if (resp.status == true) {
this.makeReview = false;
window.location.reload();
this.ts.success(resp.msg);
return true;
} else {
this.ts.error(resp.msg);
return false;
}
});
return true;
}
getReviews(data: any) {
this.ds.getReviews(data).subscribe((resp: any) => {
if (resp.status == true) {
this.reviews = [];
this.rating = '';
this.total_rating = '';
this.reviews = resp.data;
this.rating = resp.rating;
this.total_rating = resp.total_rating;
return true;
}
}, );
}
uj5u.com熱心網友回復：
你可以使用類似的東西：
<ng-container *ngIf="reviews?.length > 0; else noReview">
<div class="container" *ngFor="let items of reviews">
[...]
</div>
</ng-container>
<ng-template #noReview>
<p>Sorry there is no review yet...</p>
</ng-template>
uj5u.com熱心網友回復：
這樣做并顯示您的 .ts 代碼
<div *ngIf="reviews">
<div *ngIf="reviews.length > 0">
<div class="?ontainer" *ngFor="let items of reviews">
<div class="row" *ngIf="items.tasker_id == item.offer_by.id">
<h6>{{items.name}}</h6>
<div class="emVaRl">
<div class="lnfldP">
<svg width="16" height="16" class="elJCm" viewBox="0 0 24 24"
*ngFor='let in of counter(items.review_rating) ;let i =index'>
<path
d="M16.2 8.16l4.74.73a1.23 1.23 0 01.67 2.11l-3.46 3.28a1.23 1.23 0 00-.37 1.1l.77 4.68a1.24 1.24 0 01-1.82 1.29L12.5 19.1a1.28 1.28 0 00-1.16 0l-4.27 2.17A1.25 1.25 0 015.27 20l.85-4.68a1.19 1.19 0 00-.34-1.09l-3.41-3.4a1.23 1.23 0 01.71-2.1l4.75-.64a1.26 1.26 0 00.95-.67l2.16-4.24a1.25 1.25 0 012.24 0l2.09 4.28a1.22 1.22 0 00.93.7z">
</path>
</svg>
</div>
</div>
<p>({{items.review}})</p>
<hr>
</div>
</div>
</div>
<div *ngIf="reviews.length == 0">
<h3 style="text-align: center;">No Reviews</h3>
</div>
像這樣編輯您的 .ts 代碼
getReviews(data: any) {
this.ds.getReviews(data).subscribe((resp: any) => {
if (resp.status == true) {
this.reviews = [];
this.rating = '';
this.total_rating = '';
this.reviews = resp.data;
this.rating = resp.rating;
this.total_rating = resp.total_rating;
return true;
} else {
this.ts.warning('No Reviews')
this.ts.error(resp.msg);
return false;
}
}, (error : any) => {
this.ts.warning('No Reviews')
});
}
uj5u.com熱心網友回復：
您可以檢查容器 div 中是否有評論，并使用 ng-container 迭代評論。
<div class="container" *ngIf="reviews.length > 0">
<ng-container *ngFor="let items of reviews">
...
</ng-container>
</div>
編輯：反轉 div 和 ng-container，否則單個容器內會有多個評論。
<ng-container *ngIf="reviews.length > 0">
<div class="container" *ngFor="let items of reviews">
...
</div>
</ng-container>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529093.html
標籤：有角度的