时间戳

首页 > 解决方案 > 为什么我的“onclick()”事件在 Angular 中不起作用？

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

问题描述

这是我的 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)

标签： htmlangulareventsonclickcomponents

解决方案

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

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

链接到文档

推荐阅读