为什么我的“onclick()”事件在 Angular 中不起作用？答案

【问题标题】：Why my "onclick()" event doesn't work in Angular?为什么我的“onclick()”事件在 Angular 中不起作用？
【发布时间】：2020-05-02 12:02:06
【问题描述】：

这是我的 HTML 代码：

<div class="form-popup playerOne" id="myForm_input" dir="rtl">
    <form action="/action_page.php" class="form-container">  
      <label for="funcs"><b>انتخاب ورودی</b></label>

      <mat-select placeholder="انتخاب ورودی" >
          <mat-option *ngFor="let input of inputs" [value]="input">
            {{ input }}
          </mat-option>
      </mat-select>

        <button type="submit" class="btn " style="margin-top: 270px;" onclick="setInput($event)">اعمال</button>
        <button type="button" class="btn cancel" onclick="closeForm()">انصراف</button>
    </form>
</div>

这是我的 component.ts 代码：

  setInput(event){
    console.log('the selected input is:' , event);
  }

但它似乎不起作用，因为我在控制台上没有看到任何日志消息。

编辑：

我将代码更改如下：

HTML：

<div class="form-popup playerOne" id="myForm_input" dir="rtl">
    <form action="/action_page.php" class="form-container">  
      <label for="funcs"><b>انتخاب ورودی</b></label>

      <mat-select placeholder="انتخاب ورودی" [(ngModel)] = "selectedValue">
          <mat-option *ngFor="let input of inputs" [value]="input">
            {{ input }}
          </mat-option>
      </mat-select>

        <button type="submit" class="btn " style="margin-top: 270px;" (click)="setInput(selectedValue)">اعمال</button>
        <button type="button" class="btn cancel" onclick="closeForm()">انصراف</button>
    </form>
</div>

TS：

  selectedValue: any;
  setInput(){
    console.log('the selected input is:' , this.selectedValue);
  }

但我收到此错误消息：

FlowComponent.html:8 ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
    at Function.missingNameException (forms.js:5421)
    at NgModel._checkName (forms.js:5928)
    at NgModel._checkForErrors (forms.js:5905)
    at NgModel.ngOnChanges (forms.js:5803)
    at checkAndUpdateDirectiveInline (core.js:27784)
    at checkAndUpdateNodeInline (core.js:38472)
    at checkAndUpdateNode (core.js:38411)
    at debugCheckAndUpdateNode (core.js:39433)
    at debugCheckDirectivesFn (core.js:39376)
    at Object.eval [as updateDirectives] (FlowComponent.html:12)

【问题讨论】：

标签： html angular events onclick components

【解决方案1】：

您需要使用事件绑定语法才能使其工作。

<button
  type="submit"
  class="btn"
  style="margin-top: 270px;"
  (click)="setInput($event)">اعمال</button>

链接到Docs

【讨论】：

我改了代码，但还是不行！
也许我必须传递另一个参数而不是 $event？

【解决方案2】：

在你的 html 中

<button
  type="submit"
  class="btn"
  style="margin-top: 270px;"
  (click)="setInput()">اعمال</button>

在你的组件中使用

setInput(){
  console.log('the selected input is:' , this.selectedValue);
}

问候

【讨论】：

谢谢，但它说：“FlowComponent”类型上不存在属性“selectedValue”。
在您的 html 中添加 [(ngModel)] = "selectedValue" 到 mat-select。在您的组件中声明 selectedValue: any;
为 mat-select 添加名称
太棒了！谢谢！

【解决方案3】：

使用(click)="setInput($event)" 作为绑定而不是onclick="setInput($event)"

【讨论】：

我改了代码，但还是不行！
也许我必须传递另一个参数而不是 $event？

【解决方案4】：

您应该添加模板变量以将数据传递给函数。为此使用 ngModel 并将这个 ngModel 变量作为输入传递给（点击）

     <mat-select placeholder="انتخاب ورودی" [(ngModel)] = "selectedValue">
               <mat-option *ngFor="let input of inputs" [value]="input">
                 {{ input }}
               </mat-option>
           </mat-select>

             <button type="submit" class="btn " style="margin-top: 270px;"                   (click)="setInput(selectedValue)">اعمال</button>

【讨论】：

我像你说的那样修改了代码，还修改了这部分，如` setInput(selectedValue){ console.log('选择的输入是：' , selectedValue); } ` 但还是不行！
console.log(this.selectedValue)