角度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]的值具有相同的屬性且值相同時，這是不夠的。它需要是相同的實例。