在Angular中选择时显示选项的值

Question

我是Angular的新手。我对选择标签有疑问。我有一个国家名称和国家代码列表。当我选择一个选项时，我希望选择的结果仅显示国家代码（选项的值），而不是国家名称和国家代码。 示例：

<select>
  <option value="+1">USA: +1</option>
  <option value="+66">THA: +66</option>
  <option value="+56">CHL: +56</option>
  <option value="+84">VN: +84</option>
</select>

当我选择USA时，select标签将在屏幕上显示“ USA：+1”，但是我只想在其中显示“ +1”。

对于这种情况有什么解决方案吗？如果是，请给我任何示例代码。非常感谢！

Answer 1

在标记中，您可以使用默认的选定值定义隐藏的第一个选项，并为 try { while (true) { synchronized (buffer) { while (isEmpty(buffer)) { try { buffer.wait(); } catch (InterruptedException e) { e.printStackTrace(); } } buffer.remove(buffer.size()-1); System.out.println("Consumed" + " " + buffer.get(buffer.size() - 1) + " size " + buffer.size()); buffer.notifyAll(); } } } catch (Exception e) { System.out.println(e); } 事件设置处理程序：

java.lang.IndexOutOfBoundsException: Index -1 out-of-bounds for length 0

每次选择一个选项：

• 隐藏选项的值设置为所选值
• 隐藏选项的文本设置为所选值
• 已选择隐藏选项

(change)

有关演示，请参见this stackblitz。

Answer 2

我尝试了这样的演示：

<select (click)="status=!0" (mouseout)="status=!1" style="width:120px">
    <option value="+1">{{status ? 'USA: ' : ''}}+1</option>
    <option value="+66">{{status ? 'THA: ' : ''}}+66</option>
    <option value="+56">{{status ? 'CHL: ' : ''}}+56</option>
    <option value="+84">{{status ? 'VN: ' : ''}}+84</option>
</select>

你可以做得更好