javascript - 如何使按钮从数组中默认单击

Question

我有一个如下所示的数组，用于存储我的语言及其 bool 值。我想为数组中的每种真实语言制作按钮自动点击(事件)。当然，在语言改变后(这意味着当用户点击另一个按钮时)，当前语言的 bool 应该是真的。我在 .ts 中创建了数组，在 HTML 中创建了按钮，但无法将它们连接在一起。这是我在下面尝试的内容

<div class="row">
  <div class="col-sm-8">
    <div class="form-group">
      <div *ngFor="lang of languages" class="btn-group" data-toggle="buttons" id="left">
        <h4>Language</h4>
        <button style="margin-left:10px;" type="button" class="btn btn-light">{{lang.value}}</button>
      </div>
    </div>
  </div>
</div>

languages: Language[] = [ {value: 'english',bool:true}, {value: 'dutch',bool:false} ];

Answer 1

按钮不是有状态的，active、focus、hover 伪类实际上只是在这些用户使用时应用的伪类事件发生。

您可以通过编程方式模拟这些事件，但不太可靠。如果您将 active 或 focused 伪状态设置为按钮，并且用户单击其他任何地方，则伪状态将被删除。

您需要使用一些有状态的元素，如果需要，可以将其样式设置为按钮。例如，复选框非常适合您的情况:

input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked {
  position: absolute;
  left: -9999%;
}

input[type="checkbox"] + label {
  border: solid 1px gray;
  background-color: lightgray;
  color: gray;
  border-radius: 3px;
  padding: 10px;
  cursor: pointer;
  position: relative;
  top: 20px;
  user-select: none;
}

input[type="checkbox"]:checked + label {
  background-color: royalblue;
  color: white;
}

<input type="checkbox" id="cb" name="cb">
<label for="cb">Click me</label>