Angular 角度设置下拉选择选项作为迭代前的默认选择

我有一个选择下拉列表，我从列表中迭代选项。我试图将一个单独的选项设置为默认值，以防用户未选择某个值

以下是我试图实现这一目标的方式：

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

但上述措施都不起作用

---

欢迎提供任何帮助

尝试此无默认布局，它应该可以工作。

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

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

编辑

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

public book: any = {
   pageLayout: 1
}

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

你可以试试这个

ng已选择=已选择

---

你可以从角度反应形式使用FormControl。这很简单。 您需要将反应式表单导入到您的模块中

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

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

而不需要在component.ts中创建FormControl

public book: any = {
   pageLayout: ''
}

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的默认值将为null。并且将在dropdawn中选择值为null的选项

在您的情况下，将new FormControl0作为默认值。

尝试代码：

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

以及：

---

这是旧版本的angular 1。这确实是一个选项。不是我最后使用的那个，但是谢谢你的帮助。默认的页面布局应该是什么？对象是否包含id参数或仅包含id？您能用一些有意义的默认值编辑您的示例吗？@shemekh应该是id来设置默认值。@georgegegeorge您使用了什么，因为我使用的是服务映射也没有默认布局0不等于nul；0 !== 无效的没有默认布局我想你可以试试这个

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

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>