更改 angular 中的事件处理程序而不是从 select 中读取选项值

Question

我试图让 onPageSizeUpdate 函数在选中时读取选项的值，但似乎无法读取日志中显示的值。有帮助吗？

html


    <div class="col-md-3 mt-2" style="text-align: right;">
                      <span class="mr-2">Page Size</span>
                      <select (change)="onPageSizeUpdate($any($event.target).value)">
                        <option value="" selected="true">5</option>
                        <option value="">10</option>
                        <option value="">20</option>
                        <option value="">50</option>
                      </select>
                    </div>
    ```
    ## typescript ##
    onPageSizeUpdate(pageSize) {
        console.log(pageSize);
        console.log("working");
      }

Answer 1

而不是

onPageSizeUpdate($any($event.target).value)

随便做

onPageSizeUpdate($事件)

和方法：

onPageSizeUpdate(event) {
    console.log(event.target.value)
}

或：

onPageSizeUpdate($event.target.value)

和方法：

onPageSizeUpdate(event) {
    console.log(event)
}

编辑：好吧，我们都错过了显而易见的事情：您的选项有一个空值 -_-

<option value="">50</option>

所以只需添加一个值：<option value="50">50</option>

Answer 2

您可以使用 NgModelChange 代替，但您需要添加 ngModel

因此您的代码将类似于


    <div class="col-md-3 mt-2" style="text-align: right;">
                      <span class="mr-2">Page Size</span>
                      <select [(ngModel)]="myVar" (ngModelChange)="onPageSizeUpdate()">
                        <option value="" selected="true">5</option>
                        <option value="">10</option>
                        <option value="">20</option>
                        <option value="">50</option>
                      </select>
                    </div>

和 TS

myVar ; 
onPageSizeUpdate() {
    console.log(this.myVar)
}

如果您想更改 TS 文件中的 myVar 值，这将为您提供更多控制权

更改 angular 中的事件处理程序而不是从 select 中读取选项值

change event handler in angular not reading options value from select

event-handling

typescript

angular

html