NgFor/NgIf相乘选择(收藏夹)

Question

我有一个天气应用程序，我想用一个"饱满的心；偶像

目前，当我点击不同的城市时，之前的城市没有标记(有点bug(，

所以基本上我只有一个"；饱满的心；图标显示，而不是afew。

感谢您修改我的应用程序。

添加和删除收藏夹按预期工作(显示在"收藏夹"路线中(，但我只是无法计算

了解如何将其与喜爱的图标相结合。

https://stackblitz.com/edit/github-w3expd?file=src/app/weather-page/wweather-page.component.html

组件.ts

setLikedCity(index:any){
this.likedCity = index
}

addToFav(name:any, local:any){
let favCity = {
name:name,
local:local
}
console.log("local:", local, "name:", name)
console.log("this.favoriteLocations:", this.favoriteLocations)

if(this.favoriteLocations.length ==0){
this.favoriteLocations.push(favCity)
console.log("this.favoriteLocations:", this.favoriteLocations)
console.log("ADDED")
}

else if(this.favoriteLocations.length > 0){
let index;
for(let i =0; i<this.favoriteLocations.length; i++){
if(this.favoriteLocations[i].name.Key ==favCity.name.Key){
index = i
// break;
}
}

if(index !=null){
this.favoriteLocations.splice(index, 1)
this.likedCity = ''
console.log("REMOVED")

}else{
this.favoriteLocations.push(favCity)
console.log("ADDED")
}
console.log("this.favoriteLocations:", this.favoriteLocations)
}
this.weatherService.favoriteLocations =  this.favoriteLocations
}

Component.html

<div class="container">
<div class="small-container">
<div class="row mt-5">
<div class="card" style="width: 18rem;" *ngFor="let name of TelAvivSearch; let i = index;">
<div class="card-body" style="text-align: center;">
<h5 class="card-title ">{{name.LocalizedName}}</h5>
<div *ngFor="let local of telAvivLocal ">
<p class="card-text ">{{local.WeatherText}}</p>
<p class="card-text ">{{local.Temperature.Metric.Value}}°</p>
<div *ngIf="i!==likedCity">
<i class="far fa-heart" (click)="addToFav(name, local);setLikedCity(i)"></i>
</div>
<div *ngIf="i===likedCity">
<i class="fas fa-heart" (click)="addToFav(name, local);"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- favorites -->
<div class="forecast-container mt-3 ">
<h1 style="text-align: center; ">Forecast</h1>
<div class="small-container ">
<div class="row">
<div *ngFor="let forecast of Forecast.DailyForecasts">
<div class="card " style="width: 13rem; ">
<div class="card-body" style="text-align: center;">
<h5 class=" card-title ">{{forecast.Date | date}} </h5>
<p class="card-text ">Day: {{forecast.Day.IconPhrase}}</p>
<p class="card-text ">Night: {{forecast.Night.IconPhrase}}</p>
<p class="card-text ">{{forecast.Temperature.Maximum.Value}}°<span>/ {{forecast.Temperature.Minimum.Value}}°</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

您可以在commponent.ts中添加以下方法，并更改html端的*ngIf条件-它现在应该可以工作了。

isLikedCity(key: number): boolean {
const idx = this.favoriteLocations.findIndex(
x => x.name['Key'] === key
);
return idx >= 0;
}

<div *ngIf="!isLikedCity(name.Key)">
<i class="far fa-heart" (click)="addToFav(name, local);setLikedCity(i)"></i>
</div>
<div *ngIf="isLikedCity(name.Key)">
<i class="fas fa-heart" (click)="addToFav(name, local);"></i>
</div>

Answer 2

如果我是你，那么我可能会为TelAvivSearch对象数组的所有对象添加一个额外的属性，称之为blFavorite，这将通过按下心脏来更改它的值。如果满足条件，也会在html侧显示完整的*ngIf=name.blFavorite.

Answer 3

我所做的是：为TelAvivSearch中的所有元素添加了一个新的密钥Liked: 0,，如下所示：

{
"Version":1,
"Key":"3",
"Type":"City",
"Rank":31,
"LocalizedName":"Herzeliya",
"Liked":0,              <<< new key 'Liked' added
"Country":{
"ID":"IL",
"LocalizedName":"Israel"
},
"AdministrativeArea":{
"ID":"TA",
"LocalizedName":"Tel Aviv"
}
},

当用户点击心脏图标时-在setLikedCity中，我将this.TelAvivSearch[index].Liked = 1;设置如下：

setLikedCity(index:any){
this.TelAvivSearch[index].Liked = 1;
}

在addToFav功能中，根据项目是否从收藏夹列表中添加/删除来设置Liked的值，如下所示：

.....
if(index !=null){
this.favoriteLocations.splice(index, 1)
this.TelAvivSearch[index].Liked = 0;
console.log("REMOVED")
.....

在html文件中，将根据Liked键的该值选择的心形图标显示为

<div *ngIf="name.Liked === 1">
<i class="fas fa-heart" (click)="addToFav(name, local);"></i>
</div>

并且它如预期的那样工作。