角度2中的默认选择选项不起作用

Question

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

这里是一个category页：上button在top-right

点击后会弹出情态：

我想要的那类将被默认选中。

这里我做了什么，但没有工作：

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]的值具有相同的属性且值相同时，这是不够的。它需要是相同的实例。