Question

我有一个select下拉列表，并且从列表中迭代了这些选项。如果用户未选择值，我试图将一个单独的选项设置为默认（默认）。

这是我尝试实现的方式：

const rotateByStyle = ...

我也尝试过：

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

但以上方法均无效。

欢迎任何帮助

Answer 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
  }
]

Answer 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('');
}

此后，您需要将Form控件设置为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>

如果需要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)作为默认值。

Answer 3

尝试此customers，它应该可以工作。

Answer 4

您可以尝试

ng-selected="selected"

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

Answer 5

尝试代码：

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 个答案: