NgFor/NgIf 多重选择（收藏夹）

Question

我有一个天气应用程序，我想在其中用“全心”图标标记乘最喜欢的城市。

目前，当我点击不同的城市时，之前的城市没有被标记（有点问题），

所以基本上我只显示一个“全心”图标，而不是几个。

感谢修改我的应用程序的帮助。

添加和删除收藏夹按预期工作（显示在“收藏夹”路线中），但我想不通

了解如何将它与最喜欢的图标结合起来。

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

Component.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

您可以在 yout 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>

它按预期工作。