Question

我想浏览选定的下拉值。假设我从下拉列表中选择第一个值，然后导航到第2页，如果我选择另一个值，则导航到第3页，依此类推。

角度6

<select
    class="form-control"
    id="mnptype"
    placeholder="Mnp Type"
    [(ngModel)]="optionSelected"
    (change)="onNavigate($event.target.value)"
>
    <option value="" disabled selected> Please select Option</option>
    <option *ngFor="let id of mnptype" [value]="id">{{id}}</option>
</select>
<br />

export class MnpIndividualComponent implements OnInit {
    mnptype: string[] = ['Port In', 'Port In Withdrawal'];

    onNavigate(location: string) {
        this.router.navigate(['sim']);
    }
}

Answer 1

在您的代码中：

<option *ngFor="let id of mnptype" [value]="id">{{id}}</option>

在这里，您将值绑定到id，但是id是mnptype数组中的字符串，我认为您应该这样做：

<option *ngFor="let item of mnptype;let id = index" [value]="id">{{item}}</option>

在onNavigate函数中遇到问题时，您并没有使用this.router.navigate(['sim']);中的location参数，而是始终导航到相对路径'sim'。另外，您还必须在路由模块中相应地更改路由。好的，看到您的评论后，您可以使用onNavigate函数中的简单if条件导航到sim或esaf。

onNavigate(location) {
 if(location === 'your selected option') {
  this.router.navigate(['sim']);
} else if(location === 'your another option') {
  this.router.navigate(['esaf']);
}
}

选择DropDown值，然后使用Angular 6

1 个答案: