FormArray Angular 中的动态 id

2023-12-29

一切安好? 我正在使用 FormArray 并且遇到以下问题,当尝试获取类别的值时,它总是返回相同的值,因为它是一个 formArray id="category" 是固定的。 我目前可以像这样保留 id 动态:id:"category"+i。 但我不会因此获取此 id:"category"+i 值。动态地。 问题是如何动态获取这个值。 提前致谢

Component 

  getCategory() {
    this.nameList = []
    const value = (<HTMLInputElement>document.getElementById("category")).value 
    console.log(this.nameList)
    this.initcategory(value)
  }
  initcategory(value) {
    console.log(value)
    const totalResults = 0;
    const searchModel = {
      text: '',
      status: '',
    };
    this.feedstockService.getFeedstock(totalResults, searchModel)
    .subscribe(response => {
      const feedstocks = response.results.filter(x => x.category === value)
      feedstocks.forEach(feedstock => this.nameList.push(feedstock.name))
     })
  }
HTML


<ng-container  [formGroup]="feedstockForm">
          <ng-container formArrayName="feedstock">
            <accordion [closeOthers]="oneAtATime" *ngFor="let fcFeedStock of feedstockForm.get('feedstock')?.controls; let i = index">
              <accordion-group  heading="{{ fcFeedStock.get('position').value }} / {{ fcFeedStock.get('category').value }}" [formGroupName]="i">
                <div>
                  <i class="material-icons close-category" (click)="removeFeedstockCategory(i)">
                    close
                  </i>
                </div>
                <div class="divide-section">
                  <div class="first-column">
                    <div class="header-section options">
                      <span>ADICIONAR COMPONENTE</span>
                      <i class="material-icons" (click)="addFeedstockComponent(i)">
                        add
                      </i>
                    </div>
                      <div class="form-group">
                        <label for="category">CATEGORIA</label>
                        <select class="form-control" formControlName="category" id="category" (onChange)="getCategory()" (blur)="onCountryChange($event.target.value)">
                          <option value="" selected ></option>
                          <option *ngFor="let cat of categories" [value]="cat.value">
                            {{cat.viewValue}}
                          </option>
                        </select>
                      </div>

Rod,当我们管理 FormGroup 的 FormArray 时(我想象你想以这种方式管理数组

data=[{position:..category},{position:..,category:...}]

首先我们用数组创建一个 getter

get categoryArray()
{
   return this.feedstockForm.get('feedstock') as FormArray
}

并创建一个返回带有 formArray 值的 FormGroup 的函数

getCategoryGroup(data:any=null)
{
      data=data ||{position:0,category:''}
      return new FormGroup({
          position:new FormGroup(data.position),
          category:new FormGroup(data.category)
      })
}

请注意,此函数返回一个 FormControls 的 FormGroup,其中包含我们传递的对象“数据”的值,如果我们不传递参数,则返回一个空 FormGroup

所以,我们可以像这样创建我们的 formGroup

this.feedstockForm=new FormGroup(
{
      new FormArray(data.map(x=>this.getCategoryGroup(x)
})

此外,要向 FormArray 添加新元素,您可以简单地(看看我们如何使用定义之前的两个函数)

addElement(){
   this.categoryArray.push(this.getCategoryGroup()))
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

FormArray Angular 中的动态 id 的相关文章

  • 如何在 Angular 组件中将数据传递到两级、三级,无需进行 props 钻探的最佳方法是什么?

    我是 Angular 的新手 我知道我们可以将数据从顶层传递到底层 就像在 React 中一样 我们可以使用 Context 或 Redux 来避免 props 钻探 Angular 中也有类似的东西吗 是的 我确实尝试过 Input Ev
  • 解释 javascript 中的奇怪行为

    我在推特上看到了这个 我也无法解释 定义一个onload函数按以下两种方式工作 1 JSFiddle http jsfiddle net 6rq9k 2 JSFiddle http jsfiddle net 6rq9k 1
  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va
  • Google 文档 - 以编程方式将鼠标点击发送到大纲窗格中的项目

    在 Google 文档中 您可以打开大纲窗格并查看文档中的所有标题 您也可以单击标题 视图将滚动到标题 我的问题是如何使用 Chrome 扩展中的 JS 以编程方式模拟鼠标单击 以将视图滚动到所需的标题 我尝试了以下代码 但没有任何反应 u
  • 从 JavaScript 将参数传递给 p:remoteCommand

    我想将值传递给remoteCommand来自 JavaScript 如果这是可能的 我该如何做到这一点以及如何在支持 bean 中接收它们 对的 这是可能的 如何执行此操作取决于 PrimeFaces 版本 你可以在PrimeFaces 用
  • jquery:如何检查div中的所有单选按钮是否被选中

    我的 html 看起来像这样 div div
  • 使用 jQuery 的 javascript 关联数组长度

    我正在使用 javascript 关联数组 例如 var testarray testarray one 1 testarray two 2 testarray three 3 我也在旁边使用jquery 如何使用 jquery 或任何其他
  • 设置股票数据 Highcharts xAxis 的格式

    我已经浏览了需要为 xAxis 属性设置的 Highcharts 选项来格式化时间标签 但没有运气了解这对于这种情况到底是如何工作的 我在白天 盘中 检索了股票的动态数据 我需要显示这些数据 因为检索的数据每天从 9 30 开始到 17 0
  • 以编程方式触发 highchart 散点图上某个点的单击事件

    实际上 我有一个小要求 其中有一个带有点列表和下拉列表的散点图 当我从下拉列表中选择一个项目时 应触发其相应的数据点单击 当我在图表上选择一个数据点时 必须执行一些操作 并且下拉列表应根据选择进行更新 我们有什么办法可以做到这一点吗 我尝试
  • 将数字限制为段的最优雅的方法是什么?

    比方说x a and b是数字 我需要限制x到段的边界 a b 换句话说 我需要一个钳位功能 https math stackexchange com q 1336636 clamp x max a min x b 有人能想出一个更易读的版
  • 如何按值删除数组中的多个项目?

    我正在尝试做一个removeAll 函数 它将删除具有该特定值 而不是索引 的数组的所有元素 当我们对循环进行任何更改时 棘手的部分就出现了 索引往往会移动 使其很难像我们想要的那样工作 并且每次更改时都重新启动循环 这在大数组上效率非常低
  • 您网站上的自定义 jQuery 脚本有多少行代码?多少才算是太多呢?

    对于我们的网站 我使用了大量 jQuery 现在我正在查看基础库顶部的 340 行 jQuery 代码 多少是太多了 我将添加更多内容 我什么时候开始尝试压缩代码并最终转向 OOP 行数并不意味着什么 重要的是你实际上在做什么 您可能拥有
  • 从 html 页面和 javascript 调用 java webservice

    我正在尝试从 javascript 调用 java 实现的 Web 服务 使用 NetBeans IDE 我读过很多关于 jQuery 和 AJAX 的内容 但我似乎无法掌握它 假设我的 Web 服务 WSDL 位于 http localh
  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬
  • Angular 5 表单验证(必需)不起作用

    我正在使用 TypeScript 学习 Angular 5 我对此完全陌生 我现在正在尝试构建一个表单并验证它 但它无法正常工作 这是我的组件 Component selector app login templateUrl login c
  • 在 React JSX 中返回配对元素

    问题 在 React 中 您希望通过映射数组来创建 DOM 结构 但数组中的每个项目应返回 2 个元素 例如 import React from react import from lodash let Component React ex
  • 在 Javascript 中创建数组

    我对 javascript 不太熟悉 并且在用 javascript 制作 2d 或者也许我可能需要 3d 数组时遇到了一些麻烦 我目前需要收集 2 条信息 一个 ID 和一个值 因此我创建了以下内容 var myArray var id
  • 如何在 ionic2 中 pop() 之后重新加载 ion-page

    我有2页Page1 and Page2 我用过this nav pop 在Page2中 它将弹出Page2 Page1将启用 但我想刷新Page1 先感谢您 您可以将父页面与导航推送一起传递 这样您就可以将父页面作为 navParamter
  • Angular 2在两个组件之间传递数据

    我想在两个组件之间传递数据 但我的问题是 我有两个组件 假设一个是 主 另一个是 模态对话框 在我的主要部分中 我想打开模态对话框并从模态对话框中获取数据 而无需离开我的主要组件 我知道如何使用 Input 但我看不到在我的应用程序中使用它
  • 角度 2 ngIf 与可观察?

    我有一个非常简单的服务 它的工作是从 api authenticate url 获取 200 或 401 auth service ts Injectable export class AuthService constructor pri

随机推荐

  • ' aria-label='img 应该是 PIL 图像。得到'> img 应该是 PIL 图像。得到

    我试图迭代加载程序以检查它是否正常工作 但是给出了以下错误 TypeError img should be PIL Image Got
  • 从 Spring boot 1.2 升级到 1.5.2 后,Tomcat 8.5 启动期间出现 FileNotFoundException

    I upgraded Spring Boot从 1 2 0 到1 5 2 After那个升级 Tomcat8 5正在投掷文件未找到异常 during startup 下边是one of那些异常 它正在抛出超过 10个类似的例外情况 我不知道
  • 如何将 Android 测试设备添加到 Firebase?

    我正在将 Firebase 分析集成到我的 Android 应用程序中 但我无法在文档或谷歌中看到如何添加测试设备 因此它不依赖于统计数据 我测试了很多 所以如果计算我自己的事件 我的主要统计数据将被损坏 在admob我做 AdReques
  • IE 9 中框大小调整 border-box 和 min-width 的问题

    我正在使用盒子大小 边框框模型 当内联块元素与一个最小宽度包含在一个内联块元素 容器 容器在 Internet Explorer 9 中太宽 在 FF 10 0 Chrome 17 0 Opera 11 5 和 Safari 5 1 2 中
  • Caret::train - 未估算的值

    我试图通过将 knnImpute 传递给 Caret 的 train 方法的 preProcess 参数来估算值 根据以下示例 这些值似乎未进行估算 仍为 NA 然后被忽略 我究竟做错了什么 任何帮助深表感谢 library caret s
  • 使用 int dtype 进行 numpy 数组计算时出错(需要时无法自动将 dtype 转换为 64 位)

    当计算的输入是具有 32 位整数数据类型的 numpy 数组 但输出包含需要 64 位表示的较大数字时 我遇到了 numpy 计算不正确的问题 这是一个最小的工作示例 arr np ones 5 dtype int 2 24 300 arr
  • 检查数组是否为空[重复]

    这个问题在这里已经有答案了 我有以下代码 然而 empty error 仍然返回true 即使没有设置任何内容 有什么不对吗 数组中有两个元素 这绝对并不意味着数组为空 作为快速解决方法 您可以执行以下操作 errors array fil
  • 当可选项为空时如何返回?

    我喜欢那个选项 https docs oracle com javase 8 docs api java util Optional html现在在Java标准库中 但我一直遇到一个基本问题 我还没有弄清楚如何以最佳方式解决 最容易阅读和理
  • 强制网页适合网络视图

    我需要两件事 我需要显示一个显示整个网页 水平 的网络视图 并自动将其缩小到显示整个页面边缘到边缘所需的任何宽度 我很好奇如果这个 a 完全可以做到 b 如果是这样 我可以仅使用 WebView 或 c 如果我需要修改页面的 HTML 以挤
  • 创建两个连接表的数据库选择?

    我必须数据库表 课程 和 学生 课程表包含列 id course name course number 学生表包含列 学生姓名 学生编号 课程编号 我已经创建了课程表 但创建学生表时遇到问题 两个班级可能有相同的学生 因此相同的学生行将存在
  • 防止父级在子 div 中滚动

    当我滚动到孩子的底部时div the body元素开始滚动 我怎样才能防止这种情况发生 我只想要body当光标位于其上时滚动 例子 JsFiddle http jsfiddle net 5mmay 当然是通过添加一些 javascript
  • 将 Perl“die”和“warn”包装在实用程序子例程中

    我想编写一个小子例程 它可以以一致的方式装饰所有错误消息 而不必在我的程序中复制它 但是我希望行号来自调用它的地方 而不是来自调用它的地方die warn发生 在 C 中 我只使用预处理器宏 但 Perl 没有这些 实现这一点的最佳方法是什
  • 如何使用javascript触发文本框上的焦点事件?

    如何使用javascript触发文本框上的焦点事件 例如 在 jQuery 中 我们可以使用以下命令触发焦点事件 textBox focus 同样 我们在纯 JavaScript 中是否有类似的触发器功能 我最终不得不摆弄这个问题 并想出了
  • 图数据库中时间序列数据的序列聚合

    All 我是图形数据库领域的新手 想知道此类示例是否适用于图形数据库 假设我正在看一场棒球比赛 当每个球员击球时 有 3 种可能的结果 安打 三振或保送 对于每个击球手和整个棒球赛季 我想弄清楚的是序列的计数 例如 对于 N 次上垒的击球手
  • 在 PHP 中检索图像方向

    如何在 PHP 中获取图像 JPEG 或 PNG 的图像方向 横向或纵向 我创建了一个 php 网站 用户可以在其中上传图片 在将它们缩小到较小的尺寸之前 我想知道图像的方向如何才能正确缩放 感谢您的回答 我一直都是这么做的 list wi
  • 将排除路径添加到多个文本视图

    我正在尝试将多个排除路径添加到一系列UITextViews 依次布置在UIScrollView 像这样 while lastRenderedGlyph lt self manager numberOfGlyphs CGRect textVi
  • AWS lambda 和 AWS Lambda@EDGE 之间有什么区别?

    简单的 aws lambda 和 aws lambda edge 之间有什么区别 Lambda 根据某些触发器执行函数 Lambda 的用例相当广泛 并且与许多 AWS 服务有大量集成 您甚至可以使用它通过 AWS 的 API 简单地执行代
  • 非 Java 程序员进行 Android 开发的最快途径

    我们已经做出了加入 Android 潮流的决定 整个开发环境已经安装并配置正确 我完成了中建议的步骤http developer android com sdk installing html http developer android
  • 使用正则表达式替换重叠的子模式

    我有以下正则表达式替换 input re sub r a zA Z0 9 s a zA Z0 9 r 1 2 input 我在字符串上使用正则表达式 3 a 5 b 我回来了 3 a 5 b 我想我应该回来 3 a 5 b 因此 不知何故
  • FormArray Angular 中的动态 id

    一切安好 我正在使用 FormArray 并且遇到以下问题 当尝试获取类别的值时 它总是返回相同的值 因为它是一个 formArray id category 是固定的 我目前可以像这样保留 id 动态 id category i 但我不会