基于值的角度开关不透明度

Question

所以我有这两个标志：

<div class="flag flag-srb" id="2" (click)="changeLanguage(2)">

    <img src="assets/flags/srb.png" alt="srb" height="64" width="64">

</div>

<div class="flag flag-eng" id="1" (click)="changeLanguage(1)">

    <img src="assets/flags/eng.png" alt="eng" height="64" width="64">

</div>

默认情况下，这两个的不透明度都是 0.5。css：

.flag {

    display: inline;

    padding-right: 10px;

    opacity: 0.5;

}

现在我想根据用户选择的不透明度将不透明度更改为 1。然后当他切换到不同的标志（点击不同的标志）时，他选择的不透明度变为 1，而另一个恢复为 0.5。

当他点击旗帜时，他激活了这个功能：

 changeLanguage(id){

    this.sightService.changeLanguageId(id);

    this.sightService.getSights().subscribe(sights => {

      this.sights = sights;

    });

    console.log("this.sights is now: ", this.sights);

    console.log("id is",id);

    var testNula = document.getElementById(id); //GET PICTURE WITH ID

    var testDva = document.getElementById(id).id; //GET PICTURE ID, THE NUMBER

    if(testDva == this.sights[0].pin_lang_id) { //WHAT I TRIED

      console.log("THIS ONE IS SELECTED", testDva);

      testNula.style.opacity = "1";

    } else if (testDva != this.sights[0].pin_lang_id) {

      testNula.style.opacity = "0.5";

    }

  }

注意this.sights[0].pin_lang_id是加载了一个服务。所以当他点击旗帜时会发生变化。我想用这个来改变不透明度。

另外，当页面加载时this.sights[0].pin_lang_id是 2，所以第一个标志应该是不透明度 1，另一个是 0.5。当他点击英国国旗时，第一个旗帜应该是0.5，而英国是1。

Answer 1

在 .ts 中创建一个新变量selectedLang ，changeLanguageId根据索引更新变量&nbsp;changeLanguage(id){&nbsp; &nbsp; this.sightService.changeLanguageId(id);&nbsp; &nbsp; this.sightService.getSights().subscribe(sights => {&nbsp; &nbsp; &nbsp; this.sights = sights;&nbsp; &nbsp; });&nbsp; &nbsp; this.selectedLang = id;&nbsp; }<div class="flag flag-srb" id="2" [style.opacity]="{{this.selectedLang === 2 ? 1 : 0.5}}" (click)="changeLanguage(2)">&nbsp; &nbsp; <img src="assets/flags/srb.png" alt="srb" height="64" width="64"></div><div class="flag flag-eng" id="1" [style.opacity]="{{this.selectedLang === 1 ? 1 : 0.5}}" (click)="changeLanguage(1)">&nbsp; &nbsp; <img src="assets/flags/eng.png" alt="eng" height="64" width="64"></div>

Answer 2

您可以将变量设置为选定的标志索引var selectedflag&nbsp;指数;然后根据服务为您提供索引设置标志值this.selectflagindex =this.sights[0].pin_lang_id;然后在模板中比较选定的索引并将不透明度设置为 1 但默认情况下将所有设置为 0.5你 div 是这样的<div [ngStyle]="{'opacity':check selected(id)}" </div>checkselected(id){ return this.selectedFlag == id ? '1' :'0.5'}通过发送适当的 id，将为 div 设置 opacity 的值。这将适用于任何数量的语言，不仅适用于两个