Javascript / Angular - Как выполнить интерполяцию строк внутри переменной или метода класса? - PullRequest
Новая
       15

Javascript / Angular - Как выполнить интерполяцию строк внутри переменной или метода класса?

0 голосов
/ 28 мая 2020

Я не знаю, возможно это или нет, но вот моя идея:

У меня есть класс с методами, и я хочу представить метод в компоненте h1 Html, который соответствует выбранной строке.

По сути, у меня есть класс покемонов, каждый из которых представляет собой покемон, и я хочу переключать методы, когда мой пользователь выбирает один тип покемонов.

Вот код:

Класс обслуживания (данные): 

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GenIService {

  swampert = {
    hp: 138,
    atk: 121,
    def: 110.63,
    type: ' Water  Ground',

   };
}

Главная страница: 

import { Component, OnInit } from '@angular/core';
import {GenIService} from "../Pokemons/gen-i.service";



@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})


export class HomePage implements OnInit {

  genOne = [];

  button1clicked= false;
  button2clicked= false;

  pokemon1Selected = '';
  pokemon2Selected = '';

  constructor(private gen1: GenIService ) {}

  ngOnInit(): void {
    console.log(this.gen1.swampert.hp);

  }

  buttonOneSelected() {
    this.button1clicked= true;
    this.button2clicked=false;
  }

  buttonTwoSelected() {
    this.button1clicked= false;
    this.button2clicked=true;
  }

  pokemon1SeletectedSwampert() {
    this.pokemon1Selected = "Swampert";

  }

  pokemon2SeletectedVenusaur(){
    this.pokemon2Selected = 'Venusaur';
  }

The Html код: 

<ion-item>
         <ion-label>Name: {{}}</ion-label>
         <ion-label>HP: {{this.gen1.{pokemon1Selected}.hp}}</ion-label>
         <ion-label>ATK: {{}}</ion-label>
         <ion-label>DEF: {{}}</ion-label>
         <ion-label>Type: {{}}</ion-label>

    </ion-item>

Итак, в коде Html я пытаюсь использовать эту переменную = this.gen1.swampert.hp, но поменяйте имя покемона на переменную pokemon1Selected, которая в данном случае равно "Swampert".

Как я могу это сделать?

1 Ответ

0 голосов
/ 28 мая 2020

На основании вашего объявления genOne - это массив, поэтому я не уверен, что вы пытаетесь получить, когда звоните

console.log(this.gen1.swampert.hp);

Если я правильно понимаю, вам нужно что-то вот так (при условии, что вы добавляете свойство name к вашему объекту покемона)

.ts 

public getPokemonOneSelected() {
    return this.genOne.find(x => x.name === this.pokemon1Selected);
}

HTML

<ion-label>HP: {{this.getPokemonOneSelected()?.hp}}</ion-label>

Это '?.' предназначен для предотвращения ошибки, если .find () возвращает undefined

Как указал Фикс, было бы лучше отслеживать выбранных покемонов только с 1 переменной, поэтому вместо 

 pokemon1Selected = '';
 pokemon2Selected = '';

просто имейте 

selectedPokemon = '';
...
public getSelectedPokemon() {
    return this.genOne.find(x => x.name === this.selectedPokemon);
}
...
<ion-label>HP: {{this.getSelectedPokemon()?.hp}}</ion-label>
...