正文 

当前位置： 首页 > 源码 >

有没有更好的方法将值推送到表单控件，其中数组作为 Angular 中的值

     2023-03-13     232

关键词：

【中文标题】有没有更好的方法将值推送到表单控件，其中数组作为 Angular 中的值【英文标题】：Is there a better way to push a value to a form control with an array as a value in Angular 【发布时间】：2021-11-14 14:51:20 【问题描述】：

我目前有一个多选列表，我想从组件中添加一个值。我现在这样做的方式不会在 UI 上更新，也不会运行我的自定义验证器。如果我控制表单控件的值，它会显示正确的值。有没有更好的方法来做到这一点，或者任何人都可以解释为什么会发生这种情况？

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">
      topping
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<button (click)="add()">Add Onion To List</button>

export class SelectMultipleExample 
      toppings = new FormControl([]);
      toppingList: string[] = [
        'Extra cheese',
        'Mushroom',
        'Onion',
        'Pepperoni',
        'Sausage',
        'Tomato',
      ];
    
      ngOnInit() 
        this.toppings.addValidators(this.validator);
      
    
      add() 
        this.toppings.value.push('Onion');
        console.log(this.toppings.value);
      
    
      validator(control: AbstractControl): ValidationErrors | null 
        console.log('Checked');
        return null;

https://stackblitz.com/edit/angular-dwztco?file=src/app/select-multiple-example.ts

【问题讨论】：

【参考方案1】：

您需要致电FormControl.setValue 进行更新。 FormControl.value 应该是只读的。

改变

this.toppings.value.push('Onion');

到

this.toppings.setValue([...this.toppings.value,"Onion"]);

请注意，这会在多次单击按钮时将重复值“洋葱”添加到列表中，但是当您手动选择列表中的某些内容时，重复值会自动删除。无论如何，这超出了这个问题的范围。

【讨论】：

将值推送到猫鼬模式中对象内的数组

】将值推送到猫鼬模式中对象内的数组【英文标题】：Pushavaluetoanarrayinsideanobjectinmongooseschema【发布时间】：2021-02-0916:12:05【问题描述】：我正在尝试将值推送到mongoose模式中的对象内的数组。这是我的架构：constUserSchema=newmongoose... 查看详情

如何将值推送到 Cypher 中的属性数组？

】如何将值推送到Cypher中的属性数组？【英文标题】：HowtopushvaluestopropertyarrayinCypher?【发布时间】：2014-03-2515:28:16【问题描述】：我有两个节点user和files有一个关系:contains，这个关系有一个属性id是一个数组，表示为(:user)-[:contai... 查看详情

将值推送到复选框或单选更改上的数组的功能

】将值推送到复选框或单选更改上的数组的功能【英文标题】：functiontopushvaluetoarrayoncheckboxORradiochange【发布时间】：2016-01-2401:10:41【问题描述】：我有这样的功能：$(\'input:checkbox\').change(function()array=[];$(\'input:checkbox:checked\').each(... 查看详情

如何将值推送到 QML 属性变量二维数组 - 动态？

】如何将值推送到QML属性变量二维数组-动态？【英文标题】：HowtopushvaluestoQMLpropertyvarianttwodimensionalarray-dynamically?【发布时间】：2014-09-2911:19:10【问题描述】：这是我尝试过的：importQtQuick2.0RectanglepropertyvarianttwoDimTempArray:[[]]propert... 查看详情

如何按键过滤数组并使用javascript将值推送到另一个数组

】如何按键过滤数组并使用javascript将值推送到另一个数组【英文标题】：Howtofilteranarraybykeyandpushthevaluetoanotherarrayusingjavascript【发布时间】：2020-11-2520:06:03【问题描述】：这是我的第一个数组data=["id":1111,"date":"2020-08-03T08:00:00+00:00... 查看详情

如何将值推送到本地存储？

】如何将值推送到本地存储？【英文标题】：Howtopushvaluestolocalstorage?【发布时间】：2019-10-1312:32:04【问题描述】：我在js中有以下代码。如果我使用静态数组一切正常。否则我得到：未捕获的类型错误：myArray.push不是函数functionte... 查看详情

如何在nodeJS的mysql查询中将值推送到数组？

...送到错误数组中，具体取决于查询的结果。我尝试了几种方法，直接从箭头函数定义一个变量，返回记录的数量，但正如我所见，查询箭头函数不操纵变量。如何在条件语句中使用返回的记录数？constuserExis 查看详情

如何将表单中的输入中的多个值推送到 mongoose.model 中的对象数组？

】如何将表单中的输入中的多个值推送到mongoose.model中的对象数组？【英文标题】：HowcanIpushmultiplevaluesfrominputsinaformtoanarrayofobjectsinmongoose.model?【发布时间】：2019-08-2118:35:44【问题描述】：我正在使用向mongoose.model添加值的表单制... 查看详情

webview javascript将值推送到上一页不起作用

】webviewjavascript将值推送到上一页不起作用【英文标题】：webviewjavascriptpushvaluetopreviouspageisnotworking【发布时间】：2014-06-1014:48:13【问题描述】：我有一个网页。我用来打开网页。第一页有一个显示弹出窗口的按钮。在此弹出窗口... 查看详情

以空格为分隔符的爆炸数组并将值推送到新数组

】以空格为分隔符的爆炸数组并将值推送到新数组【英文标题】：Explodingarraywithspaceasthedelimeterandpushingthevaluestoanewarray【发布时间】：2015-06-1516:12:51【问题描述】：我有一个本身就是一个数组的帖子函数，帖子包含数组形式的人... 查看详情

比较两个数组并将不同的值推送到新数组[重复]

】比较两个数组并将不同的值推送到新数组[重复]【英文标题】：Comparetwoarraysandpushdifferentvaluestonewarray[duplicate]【发布时间】：2015-06-0123:04:26【问题描述】：我有两个要比较的数组，并将两个数组中不同的值推送到一个新数组中... 查看详情

如何在猫鼬中动态地将值推入对象的属性？

】如何在猫鼬中动态地将值推入对象的属性？【英文标题】：howtopushvalueintoobject\'spropertydynamicallyinmongoose?【发布时间】：2020-11-0120:21:17【问题描述】：我想根据使用mongoose从前端收到的属性值将值推送到数组中。架构：authencity:fa... 查看详情

比较并将正确的值推送到 JavaScript/TypeScript 中的对象数组

】比较并将正确的值推送到JavaScript/TypeScript中的对象数组【英文标题】：CompareandpushtherightvaluetoArrayofobjectsinJavaScript/TypeScript【发布时间】：2019-03-2206:28:33【问题描述】：以下两个问题看起来相似，但与我的算法无关。因为我面临... 查看详情

如何将promise的返回值推送到数组中？[重复](代码片段)

...我希望在从promise获取值之后对其进行过滤，因此我需要将值保存到一个数组中，稍后我可以在代码中调用它。我怎样才能做到这一点？编辑：这是我想要实现的：constgetPromiseResult=require('./list');lete 查看详情

将 getCurrentPosition() 值推送到数组中，但无法控制数组的日志元素

】将getCurrentPosition()值推送到数组中，但无法控制数组的日志元素【英文标题】：PushinggetCurrentPosition()valuesintoarraybutcannotconsolelogelementsofthearray【发布时间】：2018-11-1105:59:51【问题描述】：我已将地理定位API包装在getLocation()函数... 查看详情

如何将新值推送到 Mongoose 中的嵌套数组

】如何将新值推送到Mongoose中的嵌套数组【英文标题】：HowtopushanewvaluetoanestedarrayinMongoose【发布时间】：2019-11-1914:55:00【问题描述】：我正在使用猫鼬。如何将新值推送到数组fixture2？这是我的收藏。我使用userHash来识别此文档。... 查看详情

比较 2 个对象的值并将值推送到一个对象数组

】比较2个对象的值并将值推送到一个对象数组【英文标题】：Comparing2objects\'valuesandpushthevaluestooneobjectarray【发布时间】：2022-01-1416:20:36【问题描述】：我试图通过它们的属性和值来比较2个对象。如果“name”属性的值相互匹配，... 查看详情

如何在 PHP 中将数组值推送到另一个数组中？ [复制]

】如何在PHP中将数组值推送到另一个数组中？[复制]【英文标题】：HowtoPushArrayvaluesintoanotherArrayinPHP?[duplicate]【发布时间】：2016-06-1922:06:08【问题描述】：我正在使用PHP5.6，我想将一个数组中的值推送到另一个数组的末尾，所以... 查看详情