Question

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

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

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

在Change事件中，您可以触发选择选项的更改，并且可以在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值！

如何在select

3 个答案: