Javascript 基于按钮值切换div内容

我正试图找出如何根据按钮值切换

div

的内容，我使用的是angular2+。 这是我的

HTML

和我的

js

导出类TestComponent实现OnInit{
标题：string=“provas”；
构造函数（）{
}
填充数据（事件）{
var testTitle=document.querySelector（'.prova expand title'）；
var testDesc=document.querySelector（'prova-expand-desc'）；
var htmlTitle=“”；
var htmlDesc=“”；
开关（event.getAttribute（'value'））{
“距离”一案：{
htmlTitle=“斜槽em dist–ncia”；
htmlDesc=“参与人必须遵守法律法规，并执行“timio Iop tchagui”高尔夫球赛，著名的voadora.Aquele que pular obstáculoséO vencedor”
打破
}
“阿尔图拉”案：{
htmlTitle=“斜槽em altura”；
htmlDesc=“在科尔达大学，一名著名的voadora“timio iop tchagui”高尔夫执行官，一名运动员，一名球员，一名球员，一名球员。”；
打破
}
“穷人”一案：{
htmlTitle=“poomsae”；
htmlDesc=“参与方执行各自的行动，并确保其表现和错误。”；
打破
}
}
testTitle.innerHTML=htmlTitle；
testDesc.innerHTML=htmlDesc；
}
恩戈尼尼特（）{
}
}

萨尔托阿姆区
阿尔图拉盐酒店
穷人

在

（单击）

处理程序中，您需要使用

$event

而不是

event

不要使用

查询选择器和
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() {

  }
}



萨尔托阿姆区
阿尔图拉盐酒店
穷人

在HTML中，您已经扩展了如下值：

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

{{expandedTitle}
{{expandedDescription}

现在您正试图用纯Javascript实现这一点。使用Angular。
如果您发布了一个代码段，请让它运行它现在返回
错误类型错误：无法将属性“innerHTML”设置为null
在您的日志中没有类
prova expand title
code@MatheusBatista不客气，请勾选正确答案。
<div class="prova-expand-title">{{ expandedTitle }}</div>
<div class="prova-expand-desc">{{ expandedDescription }}</div>