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

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中根据索引更新变量

 changeLanguage(id){
    this.sightService.changeLanguageId(id);
    this.sightService.getSights().subscribe(sights => {
      this.sights = sights;
    });
    this.selectedLang = id;
  }

<div class="flag flag-srb" id="2" [style.opacity]="{{this.selectedLang === 2 ? 1 : 0.5}}" (click)="changeLanguage(2)">
    <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)">
    <img src="assets/flags/eng.png" alt="eng" height="64" width="64">
</div>

Answer 2

您可以将变量设置为所选标志索引

var selectedflag 

索引；

然后根据服务为您提供设置标志值的索引

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设置不透明度值。

这不仅适用于两种语言，而且适用于任何语言