使用 Angular 获取选择选项以显示初始选择的选项值

Question

我很难尝试使用 Angular 获取选择输入以显示最初选择的选项。我尝试了很多选择，但到目前为止都没有奏效。不知道为什么这让我如此头痛。任何帮助都会很棒，谢谢。

在我选择一个选项之前，选择输入不会显示任何内容。想要在应用加载时动态选择我想要选择的选项。

您可以通过以下链接查看我到目前为止的设置： https://stackblitz.com/edit/angular-wga92l?file=app%2Fhello.component.ts

组件：

@Component({
  selector: 'master-input',
  template: `
    <form>
      <div class="form-group">
        <label for="Master-Products">Select Master Product</label>
        <select  name="pow.name" (ngModelChange)="change($event)" [ngModel]="selectedValue" class="form-control" id="Master-Products">
          <option *ngFor="let pow of powers" [ngValue]="pow.id" [selected]="pow.id == 3">{{pow.name}}</option>
        </select>
      </div>
    </form>
  `,
  styleUrls: ['./master-input.component.scss']
})
export class MasterInputComponent {
  @Output() hasChanged: EventEmitter<number> = new EventEmitter();
  powers: any[] = [{ id: 1, name: 'Bead Ruptor Elite' }, { id: 2, name: 'Bead Ruptor 12' }, { id: 3, name: 'Bead Ruptor 96' }];
  selectedValue: string = 'Bead Ruptor 96';
  change(value: number) {
    this.hasChanged.emit(value);
  }
}

Answer 1

只需添加ngOnInit函数

powers: any[] = [ 'power1', 'power2', 'power3' ];
   ngOnInit(){
    this.selectedValue ='power3';
   }
  change(value:string) {
    this.hasChanged.emit(value)
  }

它已在您的小提琴中进行了测试。
请看工作图