如何使用 [(ngModel)] 绑定按钮单击的值答案

【问题标题】：how to bind value on button click with [(ngModel)]如何使用 [(ngModel)] 绑定按钮单击的值
【发布时间】：2020-10-14 11:05:29
【问题描述】：

这是我正在尝试的代码，

 <select id="myid" [(ngModel)]="updateId" class="form-control">
 <option value="U-001" >day </option>  
 <option value="U-002" >week</option>
 </select>

我能够更改 updateId 并且可以正常使用上述代码。但是，我不需要任何选择下拉功能。我想要与按钮单击相同的功能。我现在有两个按钮，如下所示

<div class="container">
<p> selected {{updateId}} </p>
    <button type="button home-button" id="button1" >Home</button>
    <button type="button contact-button" id="button2">Contact Us</button>
</div>

我想绑定用户选择的按钮的值。假设如果button1点击，它应该绑定ngmodel，即updateId与“U-001”

请建议我如何实现没有任何

【问题讨论】：

标签： angular angular8 angular-ngmodel

【解决方案1】：

不完全确定您在寻找什么，但您可以在事件处理程序中为变量赋值。

<button type="button home-button" (click)="updateId='U-001'" id="button1" >Home</button>
<button type="button contact-button" (click)="updateId='U-002'" id="button2">Contact Us</button>

更新：设置背景颜色

有多种方法可以在 Angular 中动态设置元素的样式。对于初学者，您可以查看ngClass 和ngStyle。在这里，我声明了一个对象 buttons = { button1: false, button2: false }，其键是您已经定义的相应元素 ID。然后我们可以使用模板引用变量（这里是#buttonHome 和#buttonContact）将ID 发送到像onClick(buttonHome.id) 这样的事件处理程序。在处理程序中，我们循环遍历按钮并在按下按钮时翻转标志。最后，我们使用blur 事件禁用所有按钮颜色。

控制器

export class AppComponent  {
  updateId: string;
  buttons = { button1: false, button2: false }

  onClick(buttonId) {
    Object.keys(this.buttons).forEach(key => {
      if (key === buttonId) {
        this.buttons[key] = true;
      } else {
        this.buttons[key] = false;
      }
    });
  }

  onBlur() {
    Object.keys(this.buttons).forEach(key => {
      this.buttons[key] = false;
    });
  }
}

CSS

button {
  cursor: pointer;
  height: 40px;
  width: 80px;
  border: none;
  margin: 2px;
}

button,.unselected {
  background-color: lightblue;
}

button,.selected {
  background-color: lightgreen;
}

模板

<button 
  #buttonHome 
  [ngClass]="buttons.button1 ? 'selected' : 'unselected'" 
  type="button home-button" 
  (click)="updateId=='U-001'; onClick(buttonHome.id)" 
  (blur)="onBlur()" 
  id="button1"
>Home</button>

<button 
  #buttonContact 
  [ngClass]="buttons.button2 ? 'selected' : 'unselected'"  
  type="button contact-button" 
  (click)="updateId='U-002'; onClick(buttonContact.id)" 
  (blur)="onBlur()" 
  id="button2"
>Contact Us</button>

工作示例：Stackblitz

^{由于我们为每个按钮按下和模糊事件循环按钮集合，如果涉及的按钮太多，它可能会更慢。}

【讨论】：

我可以改变那个按钮的颜色吗？

【解决方案2】：

在 HTML 中

<button type="button home-button" (click)="Update('U-001')" id="button1" >Home</button>

<button type="button contact-button" (click)="Update('U-002')" id="button2">Contact Us</button>

在 .ts 类中

public updateId;

Update(value : string)
{
     this.updateId = value;
}

【讨论】：