创建一个字符串来调用 json object 变量来自 angular ZFC35FDC70D5FC69D2698Z83A822C7AE53

Question

I want to create a string in my html file in order to retrieve some data from a json object.

html file

<app-banner></app-banner>
<section id="mail-view" class="bg-gray" >
  <div class="container">
    <figure id="state-stats" class="bg-white collapse in bio">
      <div ngbDropdown class="dropdown-container">
        <div class="area-dropdown dropdown-item">
          <h3>Area</h3>
           <br>
            <select [(ngModel)]="selectedArea" id="select_area" (change)="selected()">
              <option value="portugal">Portugal</option>
              <option value="evora">Evora</option>
            </select>
        </div>
        <div class="income-dropdown dropdown-item">
          <h3>Income level</h3>
            <br>
              <select  [(ngModel)]="selectedLevel" id="income_level"(change)="selected()">
                <option value="Low">Low Income Level</option>
                <option value="Poverty">Below Poverty Level</option>
              </select>
        </div>

    </div> 
      <hr>
      <table id="stats-summary" class="txt-center">
        <tbody>
          <tr>
            <td>
              <h3>{{ 'energyPoverty.Portugal_low.numberOf' | translate }} <br class="hidden-sm hidden-xs">{{ 'energyPoverty.Portugal_low.people' | translate }}</h3>
            </td>
            <td>
              <h3>{{ 'energyPoverty.Portugal_low.incomeLevel' | translate }}</h3>
            </td>
          </tr>
          <tr>
            <td>
              <h1>{{ 'energyPoverty.Portugal_low.peopleAffected' | translate }}</h1>
              <div class="txt-gray">{{ 'energyPoverty.Portugal_low.population' | translate }}</div>
            </td>
            <td>
              <h1>{{ 'energyPoverty.Portugal_low.euroNeeds' | translate }}</h1>
              <div class="txt-gray">{{ 'energyPoverty.Portugal_low.kWhNeeds' | translate }}</div>
            </td>
          </tr>
        </tbody>
      </table>
      <hr>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6">
          <div id="chart-1" style="height: 300px; text-align: center; color: #999; line-height: 300px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">
            <div style="position: relative;">
              <div dir="ltr" style="position: relative; width: 471px; height: 300px;">
                <div aria-label="Data graph." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg
                    width="471" height="300" aria-label="Data graph." style="overflow: hidden;">
                    <defs id="defs"></defs>
                    <rect x="0" y="0" width="471" height="300" stroke="none" stroke-width="0" fill="#ffffff"></rect>
                    <g>
                      <path d="M197.12755780220226,89.39527050156173L171.2125963370038,48.992117502602866A120,120,0,0,1,236,30L236,78A72,72,0,0,0,197.12755780220226,89.39527050156173"
                        stroke="#ffffff" stroke-width="1" fill="#dadadd"></path>
                    </g>
                    <g>
                      <path d="M187.66197819618304,96.63863150092834L155.43663032697177,61.064385834880554A120,120,0,0,1,171.2125963370038,48.992117502602866L197.12755780220226,89.39527050156173A72,72,0,0,0,187.66197819618304,96.63863150092834"
                        stroke="#ffffff" stroke-width="1" fill="#c01722"></path>
                    </g>
                    <g>
                      <path d="M166.83393969170945,170.00140248657362L120.72323281951574,183.33567081095606A120,120,0,0,1,155.43663032697177,61.064385834880554L187.66197819618304,96.63863150092834A72,72,0,0,0,166.83393969170945,170.00140248657362"
                        stroke="#ffffff" stroke-width="1" fill="#727278"></path>
                    </g>
                    <g>
                      <path d="M178.76746672031553,193.68566280131054L140.6124445338592,222.80943800218424A120,120,0,0,1,120.72323281951576,183.33567081095612L166.83393969170945,170.00140248657365A72,72,0,0,0,178.76746672031553,193.68566280131054"
                        stroke="#ffffff" stroke-width="1" fill="#000000"></path>
                    </g>
                    <g>
                      <path d="M236,78L236,30A120,120,0,1,1,140.6124445338592,222.80943800218424L178.76746672031553,193.68566280131054A72,72,0,1,0,236,78"
                        stroke="#ffffff" stroke-width="1" fill="#a8a8a8"></path>
                    </g>
                    <g></g>
                  </svg>
                  <div aria-label="Data Graph." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">
                    <table>
                      <thead>
                        <tr>
                          <th></th>
                          <th>{{ 'energyPoverty.Portugal_low.value' | translate }}</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>{{ 'energyPoverty.Portugal_low.heatingCooling' | translate }}</td>
                          <td>833</td>
                        </tr>
                        <tr>
                          <td>{{ 'energyPoverty.Portugal_low.hotWater' | translate }}</td>
                          <td>76</td>
                        </tr>
                        <tr>
                          <td>{{ 'energyPoverty.Portugal_low.refrigeration' | translate }}</td>
                          <td>229</td>
                        </tr>
                        <tr>
                          <td>{{ 'energyPoverty.Portugal_low.airConditioning' | translate }}</td>
                          <td>34</td>
                        </tr>
                        <tr>
                          <td>{{ 'energyPoverty.Portugal_low.other' | translate }}</td>
                          <td>117</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div aria-hidden="true" style="display: none; position: absolute; top: 310px; left: 481px; white-space: nowrap; font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif; font-size: 12px;"></div>
              <div></div>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <div class="col-xs-6 first-column">
            <ul class="txt-gray">
              <li class="li-energy-poverty same-post-height heating" style="height: 20px;"><svg height="10" width="10"
                  fill="black">
                  <circle cx="5" cy="5" r="4"></circle>
                </svg>{{ 'energyPoverty.Portugal_low.heatingCooling' | translate }}</li>
              <li class="li-energy-poverty same-post-height hot-cool-water" style="height: 20px;"><svg height="10"
                  width="10" fill="black">
                  <circle cx="5" cy="5" r="4"></circle>
                </svg>{{ 'energyPoverty.Portugal_low.hotWater' | translate }}</li>
              <li class="li-energy-poverty same-post-height refrigeration" style="height: 20px;"><svg height="10" width="10"
                  fill="black">
                  <circle cx="5" cy="5" r="4"></circle>
                </svg>{{ 'energyPoverty.Portugal_low.refrigeration' | translate }}</li>
              <li class="li-energy-poverty same-post-height air-conditioning" style="height: 20px;"><svg height="10"
                  width="10" fill="black">
                  <circle cx="5" cy="5" r="4"></circle>
                </svg>{{ 'energyPoverty.Portugal_low.airConditioning' | translate }}</li>
              <li class="li-energy-poverty other nomargin"><svg height="10" width="10" fill="black">
                  <circle cx="5" cy="5" r="4"></circle>
                </svg>{{ 'energyPoverty.Portugal_low.other' | translate }}</li>
            </ul>
          </div>
          <div class="col-xs-6">
            <ul class="data-list">
              <li class="same-post-height" style="height: 20px;">{{ 'energyPoverty.Portugal_low.heatingCoolingNeeds' | translate }}</li>
              <li class="same-post-height" style="height: 20px;">{{ 'energyPoverty.Portugal_low.hotWaterNeeds' | translate }}</li>
              <li class="same-post-height" style="height: 20px;">{{ 'energyPoverty.Portugal_low.refrigerationNeeds' | translate }}</li>
              <li class="same-post-height" style="height: 20px;">{{ 'energyPoverty.Portugal_low.AircontitioningNeeds' | translate }}</li>
              <li class="same-post-height nomargin" style="height: 20px;">{{ 'energyPoverty.Portugal_low.otherNeeds' | translate }}</li>
            </ul>
          </div>
        </div>
        <div class="col-xs-12">
          <p class="txt-gray"></p>
        </div>
      </div>
    </figure>
    <div class="row txt-center">
      <div class="col-xs-12">
        <h1 class="txt-center">{{ 'energyPoverty.Portugal_low.support' | translate }}</h1><a class="btn btn-lg-orange"
          routerLink="/energize_lives">{{ 'energyPoverty.Portugal_low.energizeLives' | translate }}</a>
      </div>
    </div>
  </div>
</section><br><br>

ts file

import { Component, OnInit } from '@angular/core';
import { ScrollService } from 'src/app/shared/scroll.service';


@Component({
  selector: 'app-energy-poverty',
  templateUrl: './energy-poverty.component.html',
  styleUrls: ['./energy-poverty.component.scss']
})
export class EnergyPovertyComponent implements OnInit {

  isCollapsed = false;
  selectedArea = 'portugal' ;
  selectedLevel= 'Low';
  selectedValue = this.selectedArea.concat('', this.selectedLevel)

  constructor(
    private scrollService: ScrollService
  ) { }

  ngOnInit() {
    this.scrollService.scrollToTop();
    console.log(this.selectedValue)
  }

  clickState(state) {
    console.log(state);
  }

  selected() {
     const selectedValue = this.selectedArea.concat('', this.selectedLevel)
     console.log(selectedValue)
  }
}

I want to take the "selectedValue" variable and create a string.

For example:

in this h3

<h3>{{ 'energyPoverty.Portugal_low.numberOf' | translate }} <br class="hidden-sm hidden-xs">{{ 'energyPoverty.Portugal_low.people' | translate }}</h3>

i want to replace "Portugal_low" with the "selectedValue" content in order to fetch specific data. The selected value changes every time you select something form the dropdown lists.

Answer 1

I figure it out and the way i did it was

<h3>{{ 'energyPoverty.' + selectedValue + '.numberOf' | translate }} <br class="hidden-sm hidden-xs">{{ 'energyPoverty.' + selectedValue + '.people' | translate }}</h3>