angular2 中的默认 select 选项不起作用

Question

一个在 angular2 中开发的应用程序，我有不同的食物类别，如果我选择一些类别（例如：沙拉..）并且在该页面中我想添加一个特定的食物弹出模式一些字段用于添加有关食物的信息，在这些字段中有一个 dropdown-list 具有不同的类别，我想要的是我已经在上面（被选择）的类别默认显示为已选择。

这是一个 category 页面：

单击 top-right 上的 button 将弹出该模式：

我希望默认选择该类别。

这是我做过但没有奏效的：

Add item modal HTML 部分：

<fieldset class="form-group">
    <label for="category">{{'category' | translate}}</label>
    <select
      id="category"
      class="form-control"
      formControlName="select"
      [ngModel]="currentCategory"
    >
      <option [value]="category.id" *ngFor="let category of categories">
        {{category.name}}
      </option>
    </select>
  </fieldset>

这是它的 TS 部分：

    export class AddItemModalComponent implements AfterContentInit {
  // @Input() currentCategory: any;
  @Input() isAdvanced:      boolean;

  public currentCategory:       any;
  public  currentCurrency:      string;
  public  itemForm:             FormGroup;
  public  categories:           Category[];
  public  deactivated:          boolean = true;

  private pictureData:          any;
  private categoryId:           string;
  private pictureUploaded:      boolean;
  private isCategoriesLastPage: boolean;
  private pageNumber:           number = 0;


  constructor(
    private router:          UIRouter,
    private formBuilder:     FormBuilder,
    private pageService:     PageService,
    private itemService:     ItemService,
    public  activeModal:     NgbActiveModal,
    private uploadService:   LcUploadService,
    private categoryService: CategoryService
  ) {
    this.categoryId      = this.router.stateService.params['category'];
    this.categoryService.getCategory(this.categoryId).subscribe(
      data => {
        this.currentCategory = data.name;
        console.log(this.currentCategory)
      },
      error => console.log('Could not load category.')
    );
  }

  ngAfterContentInit() {
    this.itemForm        = this.formBuilder.group({
      file:               new FormControl(''),
      item_type:          new FormControl(''),
      internal_reference: new FormControl(''),
      name:               new FormControl('', Validators.required),
      price:              new FormControl('', Validators.required),
      select:             new FormControl('', Validators.required),
      tax:                new FormControl('', Validators.compose([
        Validators.required,
        Validators.pattern(REGEX.ONLY_POSITIVE)
      ])),
      description:        new FormControl('', Validators.compose([
        Validators.minLength(7),
        Validators.maxLength(512)
      ]))
    });

  AddItem(): void {
    let newItem, formValue;
    if (this.itemForm.dirty && this.itemForm.valid) {
      formValue = this.itemForm.value;
      newItem = {
        tax:         formValue.tax,
        name:        formValue.name,
        price:       formValue.price,
        category_id: formValue.select,
        item_type:   formValue.item_type,
        description: formValue.description,
        picture:     this.pictureData.public_id
      };
      this.itemService.addItem(newItem).subscribe(
        (data: any): void => this.activeModal.close(data),
        (error: Response): void => console.log('Could not add item', error.json())
      );
    }
  }
}

它把它带到了控制台，但我不知道为什么它不影响 dropdown-list

这里是打开模态按钮的TS函数：

openAddItemDialog(): void {
    const modalRef: NgbModalRef           = this.modalService.open(
      AddItemModalComponent,
      {size: 'lg'}
    );
    modalRef.componentInstance.category   = this.breadcrumb;
    modalRef.componentInstance.isAdvanced = this.page.advanced;
    modalRef.result.then(
      (result: any): any => {
        if (this.categoryId === result.category.id) {
          this.items.unshift(result);
        }
      },
      (reason: any): void => console.log('Rejected!')
    );
  }

有什么帮助吗？

Answer 1

只需将默认值赋给currentCategory。 [selected] 不支持 [ngModel]

提示：如果你使用[ngValue]而不是[value]，你可以赋值一个对象

[ngValue]="category"

分配给 [ngModel]="..." 的值必须与分配给 [value]="..." or [ngValue]="..." 的值完全匹配。您可以在 {{category.name}]

中显示任何您想要的值

如果将 [ngValue] 用于对象或数组，当分配给 [ngModel] 的值具有具有相同值的相同属性时，这是不够的。它必须是相同的实例。

angular2 中的默认 select 选项不起作用

Default select option in angular2 not working

html

drop-down-menu

angular-ngmodel

angular