如何使用 [(ngModel)] 绑定按钮点击值

Question

这是我正在尝试的代码，

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

我能够更改 updateId 并且它与上面的代码一起工作正常。但是，我不需要任何 select 下拉功能。我想要与按钮点击相同的功能。我现在有两个按钮如下

<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>

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

请建议我如何在没有任何情况下实现

Answer 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 and 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

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

Answer 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中class

public updateId;

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

如何使用 [(ngModel)] 绑定按钮点击值

how to bind value on button click with [(ngModel)]

angular-ngmodel

angular

angular8

更新：设置背景颜色