Angular 将下拉选择选项设置为迭代前的默认选择答案

【问题标题】：Angular set dropdown select option as default selected before iterationAngular 将下拉选择选项设置为迭代前的默认选择
【发布时间】：2019-01-24 06:55:17
【问题描述】：

我有一个选择下拉菜单，并从列表中迭代选项。我正在尝试将一个单独的选项设置为已选择（作为默认值），以防用户未选择值。

这是我尝试实现的方法：

<select [(ngModel)]="book.pageLayout">
    <option [value]="0" [attr.selected]="book.defaultLayoutId === null">No Default Layout</option>
    <option *ngFor="let l of availableLayouts"
            [value]="l.id"
            [attr.selected]="book.pageLayout == l.id">
      {{l?.name}}
    </option>
  </select>

我也试过了：

<option [value]="0" selected="selected">No Default Layout</option>

甚至：

<option [value]="0" selected="1==1">No Default Layout</option>

但以上都不起作用。

欢迎任何帮助

【问题讨论】：

标签： angular drop-down-menu html-select

【解决方案1】：

如果您使用的是 ngModel，则选择的属性不会有太大帮助，那么您可以轻松地为定义的模型设置默认值。

<select [(ngModel)]="book.pageLayout">
  <option value="">No Default Layout</option>
  <option *ngFor="let l of availableLayouts" [value]="l.id">
    {{l?.name}}
  </option>
</select>

然后在component.ts里面

public book: any = {
   pageLayout: ''
}

编辑

要设置默认选项，我们需要将 pageLayout 值设置为 id 而不是空字符串。

public book: any = {
   pageLayout: 1
}

public availableLayouts: any = [
  {
    name: "One",
    id: 1
  },
  {
    name: "Two",
    id: 2
  }
]

【讨论】：

这确实是一个选项。不是我最终使用的那个，但感谢您的帮助。
默认页面布局应该是什么？包含 id 参数或仅包含 id 的对象？您能否使用一些有意义的默认值编辑您的示例？
@shemekh 应该是 id 来设置默认值。
@GeorgeGeorge 你用了什么，因为我正在使用服务映射

【解决方案2】：

您可以使用 Angular Reactive Form 中的 FormControl。这很简单。 Angular Docs About Reactive Form 您需要将reactive form 导入到您的模块中

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

比你需要在你的 component.ts 中创建 FormControl

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');
}

在此之后，您需要在 html 中将表单控件设置为您的元素 select

<select [formControl]="name">
  <option value="null">No Default Layout</option>
  <option *ngFor="let l of availableLayouts" [value]="l.id">
    {{l?.name}}
  </option>
</select>

如果您需要选择的默认值，您必须使用值创建 formControl，例如：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl(null);
}

///(you can pass any to new FormControl(0), or new FormControl(false), new FormControl('string'))

在这种情况下，select 的默认值为 null。并且值为 null 的选项将在 dropdawn 中被选中。

在你的情况下 new FormControl(0) 作为默认值。

【讨论】：

还有 0 不等于 nul； 0 !== 空；
我想你可以试试这个

【解决方案3】：

试试这个<option [value]="undefined" selected>No Default Layout</option>，它应该可以工作。

【讨论】：

【解决方案4】：

试试代码：

this.fullNamePresentors = this.programInfo1.filter(item => item.time >  this.fulltextDate);

和：

  <select class="form-control" id="marasemaat" style="margin-top: 10%;font-size: 13px;" [(ngModel)]="fullNamePresentors" [formControl]="stateControl"  
    (change)="onSelect($event.target.value)">
    <option *ngFor="let char of programInfo1;let i = index;"  onclick="currentSlide(9,false)" value={{char.id}}>{{char.title + " "}}  ----> {{char.name + " "+ char.family }} ---- > {{(char.time.split('T', 2)[1]).split(':',2)}}</option>

  </select>

【讨论】：

【解决方案5】：

你可以试试这个

ng-selected="selected"

https://docs.angularjs.org/api/ng/directive/ngSelected

【讨论】：

这是旧版本的 angular 1.