NgFor/NgIF乘法选择（收藏夹）

Question

我有一个天气应用程序，在那里我想用一个“全心”图标来标记多个最喜欢的城市。

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

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

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

添加和删除收藏夹工作正常（显示在“收藏夹”路线中），但我只是想不通

了解如何将其与收藏夹图标相结合。

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

Component.ts

js lang-js prettyprint-override">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

我所做的是:在< code>TelAvivSearch的所有元素中添加一个新的关键字< code > Liked，，如下所示:

{
        "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"
        }
    },

当用户点击心形图标时-在< code>setLikedCity中我设置< code >这个。TelAvivSearch[索引]。喜欢= 1；如下:

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

在addToFav函数中，根据项目是否从收藏夹列表中添加/删除，设置喜欢的值，如下所示：

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

在< code>html文件中，将根据< code > like 键的值选择的心形图标显示为

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

它按预期工作。

Answer 2

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

Answer 3

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