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

angular2中的默认选择选项无效

1 个答案: