如何在选择时获取所选选项的值

Question

我是 Angular 的新手，我有一个选择，在其选项选择中我想更改路线

现在我想在选择其中一个选项后准确地更改路线，而不是在选择后按 enter！ 任何机构都可以提供帮助吗？

<input type="text" name="" value="" class="form-control" matInput [formControl]="searchControl" [matAutocomplete]="auto" (change)="searchComponent($event)">
                <button class="search-btn"><fa-icon icon="search" class="fa-icon"></fa-icon></button>
                <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" class="animated fadeIn">
                    <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                        <a routerLink="/{{option.url}}">
                            {{option.name}}
                            {{option.id}}
                        </a>
                    </mat-option>
                </mat-autocomplete>

如您所见，我已经使用（更改）来获得价值，我做到了！但是选择该选项后，该值会显示在输入中，并且在按 Enter 后会起作用！但我希望它无需输入即可工作。

Answer 1

您无法收听选项的点击事件。 该事件不会在所有浏览器中触发（它适用的唯一浏览器是

你可以使用

<select ngModel (ngModelChange)="mySelectHandler($event)">
  <option *ngFor="let value of options" [ngValue]="value">{{value.text}}</option>
</select>

选择选项后执行代码。

Answer 2

  <select [value]="myVal" (change)="changeRoute($event.target.value)">
     <option value="">Select Value</option>
     <option *ngFor="let obj of temp" [value]="obj">{{obj}}</option>
   </select>

在更改事件中，您可以触发选择选项更改，您可以在changeRoute 函数中编写路由逻辑

Answer 3

我找到了解决办法！

 <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" class="animated fadeIn" (optionSelected)="searchComponent($event)">
                <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                    <a routerLink="/{{option.url}}">
                        {{option.name}}
                        {{option.id}}
                    </a>
                </mat-option>
            </mat-autocomplete>

在searchComponent函数中：

searchComponent(event: MatAutocompleteSelectedEvent){
    console.log(event.option.value);
}

这样我在选择时获得了 mat-option 值！