Question

我试图从组件中更新多项选择。

我使用一个object属性作为select的模型，当选择对象属性时会像你期望的那样更新。

模板中的选择代码：

<div class="form-group">
    <select multiple="" class="form-control" [(ngModel)]="recipe.mainIngredients" name="mainIngredients">
        <option *ngFor="let ingredient of mainIngredients" value="{{ ingredient._id }}">{{ ingredient.title }}</option>
     </select>
</div>

代码形成组件：

autoSelectMainIngredients(ingredient: Ingredient) {
    // gets the ingredient id to save in the object property (which is the ngmodel)
    var mainIngredientId = this.mainIngredients.findObjectPropertyByAnotherProperty("title", ingredient.title, "_id");
    if (mainIngredientId){
        // select not updating
        this.recipe.mainIngredients.push(mainIngredientId);
    }
}

更新模型时，多选未使用id更新。我怎么能实现这一目标？感谢。

修改如果我在ngOnInit上更新ngmodel：

this.recipe.mainIngredients.push("5a9e9e5a84d81edd7cb98e13");

其中＆＃34; 5a9e9e5a84d81edd7cb98e13＆＃34;是一个有效的值，它按预期工作，选择显示选择。

Answer 1

我找到了答案，我需要强制它通过使用扩展运算符来检测更改：

autoSelectMainIngredients(ingredient: Ingredient) {
    // gets the ingredient id to save in the object property (which is the ngmodel)
    var mainIngredientId = 
    this.mainIngredients.findObjectPropertyByAnotherProperty("title", ingredient.title, "_id");
    if (mainIngredientId){
        // select not updating
        this.recipe.mainIngredients.push(mainIngredientId);
        this.recipe.mainIngredients = [...this.recipe.mainIngredients];
    }
}

Answer 2

如果是p-multiselect，这是行不通的。

模板：

<p-multiSelect class="pull-down" id="checkedSecMail" dropdownIcon="pi pi-caret-down" [options]="req.secEmail"
              [(ngModel)]="req.selectedSecMail" >
              </p-multiSelect>

ts：

 selectAllMailId($event,data){
      let rowData =  this.tempRecipients.filter(elem => elem.xyz == data.xyz);
      rowData[0].secEmail.map((secmails=> rowData[0].selectedSecMail.push(secmails.label)));
    }

单击复选框将调用上述方法。并且选中了多选复选框，但是未显示选中的值

如何从组件更新多选选项

2 个答案: