Question

我试图找出如何根据按钮值切换div的内容，我使用angular2 +。这是我的HTML和我的js

＆＃13;

export class TestComponent implements OnInit {
  title:string = "provas";

  constructor() {
  }

  populateData(event){
    var testTitle = document.querySelector('.prova-expand-title');
    var testDesc = document.querySelector('prova-expand-desc');
    
      var htmlTitle = "";
      var htmlDesc = "";


    switch(event.getAttribute('value')){
      case 'distancia':{
        htmlTitle="chute em distância";
        htmlDesc="O participante pega impulso e salta sobre obstáculos alinhados executando o golpe 'timio Iop tchagui', famosa voadora. Aquele que pular mais obstáculos é o vencedor"
        break;
      }
      case 'altura':{
        htmlTitle="chute em altura";
        htmlDesc="O participante pega impulso para saltar entre duas traves unidas por uma corda, executando o golpe 'timio iop tchagui', famosa voadora. A corda sobe de acordo com os níveis das traves, aquele que alcançar o maior nível é o vencedor.";
        break;
      }
      case 'poomsae':{
        htmlTitle="poomsae";
        htmlDesc="Os participantes executam os movimentos de suas respectivas faixas, ganha aquele que tiver a melhor performance e menos erros.";
        break;
      }

    }
    testTitle.innerHTML = htmlTitle;
    testDesc.innerHTML = htmlDesc; 
  }

  ngOnInit() {

  }
}

＆＃13;

<div class="columns">
  <div class="column">
      <div id="distancia" class="prova-card distancia">
          <div class="fundo-preto-transparente"></div>
          <div class="prova-conteudo">
              <div class="prova-title">salto em distância</div>
              <div class="prova-toggle-btn" (click)="populateData(event)" value="distancia"></div>
          </div>
      </div>
  </div>

  <div class="column">
      <div id="altura" class="prova-card altura" >
          <div class="fundo-preto-transparente"></div>
          <div class="prova-conteudo">
              <div class="prova-title">salto em altura</div>
              <div class="prova-toggle-btn" (click)="populateData(event)" value="altura"></div>
          </div>
      </div>
  </div>

  <div class="column">
      <div id="poomsae" class="prova-card poomsae" >
          <div class="fundo-preto-transparente"></div>
          <div class="prova-conteudo">
              <div class="prova-title">poomsae</div>
              <div class="prova-toggle-btn" (click)="populateData(event)" value="´poomsae"></div>
          </div>
      </div>
  </div>
</div>

＆＃13;

当我点击按钮时，这是我得到的错误：ERROR TypeError: Cannot read property 'target' of undefined。

这是我对我尝试做的事情的代码测试https://codepen.io/mardico/pen/xWPyJz?editors=1010

提前感谢。

Answer 1

在(click)处理程序中，您需要使用$event代替event

Answer 2

请勿使用querySelectors和innerHTML。让我们以更直接的方式：

export class TestComponent implements OnInit {
  title:string = "provas";
  expandedTitle: string;
  expandedDescription: string;

  constructor() {
  }

  populateData(event, value){
    switch(value){
      case 'distancia':{
        this.expandedTitle = "chute em distância";
        this.expandedDescription = "O participante pega impulso e salta sobre obstáculos alinhados executando o golpe 'timio Iop tchagui', famosa voadora. Aquele que pular mais obstáculos é o vencedor"
        break;
      }
      case 'altura':{
        this.expandedTitle = "chute em altura";
        this.expandedDescription ="O participante pega impulso para saltar entre duas traves unidas por uma corda, executando o golpe 'timio iop tchagui', famosa voadora. A corda sobe de acordo com os níveis das traves, aquele que alcançar o maior nível é o vencedor.";
        break;
      }
      case 'poomsae':{
        this.expandedTitle = "poomsae";
        this.expandedDescription = "Os participantes executam os movimentos de suas respectivas faixas, ganha aquele que tiver a melhor performance e menos erros.";
        break;
      }

    }
  }

  ngOnInit() {

  }
}

<div class="columns">
  <div class="column">
      <div id="distancia" class="prova-card distancia">
          <div class="fundo-preto-transparente"></div>
          <div class="prova-conteudo">
              <div class="prova-title">salto em distância</div>
              <div class="prova-toggle-btn" (click)="populateData($event, 'distancia')"></div>
          </div>
      </div>
  </div>

  <div class="column">
      <div id="altura" class="prova-card altura" >
          <div class="fundo-preto-transparente"></div>
          <div class="prova-conteudo">
              <div class="prova-title">salto em altura</div>
              <div class="prova-toggle-btn" (click)="populateData($event, 'altura')"></div>
          </div>
      </div>
  </div>

  <div class="column">
      <div id="poomsae" class="prova-card poomsae" >
          <div class="fundo-preto-transparente"></div>
          <div class="prova-conteudo">
              <div class="prova-title">poomsae</div>
              <div class="prova-toggle-btn" (click)="populateData($event, 'poomsae')"></div>
          </div>
      </div>
  </div>
</div>

在HTML中你扩展了这样的值：

<div class="prova-expand-title">{{ expandedTitle }}</div>
<div class="prova-expand-desc">{{ expandedDescription }}</div>

现在您正尝试在纯Javascript中执行此操作。利用Angular。

根据按钮值切换div内容

2 个答案: