当列表初始化为空时使用 ngFor 创建 mat-option 元素

2024-01-20

当我在“能力”mat-select 中选择一项技能时,我想更新“专业化”mat-select”中的值。我使用以下命令将我的 var 与模型链接起来[(ngModel)]但它不会更新列表。

我尝试使用 ngModel,角度和材质为 7。

HTML:

<mat-form-field>
  <mat-select name="competence_1_name" [(ngModel)]="competence_1.name">
    <mat-option>-- Faites un choix --</mat-option>
    <mat-option *ngFor="let competence of competences" value="{{competence.name | lowercase}}">{{competence.name}}</mat-option>
  </mat-select>
  <mat-label>Compétence</mat-label>
</mat-form-field>
[...]
<mat-form-field>
  <mat-select name="competence_1_spe_1" [(ngModel)]="competence_1.specialisation_1">
    <mat-option>-- Faites un choix --</mat-option>
    <mat-option *ngFor="let specialisation of competence_1.specialisation_list" value="{{specialisation | lowercase}}">{{specialisation}}</mat-option>
  </mat-select>
  <mat-label>Spécialisation</mat-label>
</mat-form-field><br>

主要类别:

export class GeneratePnjComponent implements OnInit {

    competences: Array<Competence>;
    masteries: Array<string>;
    competence_1 = new Competence("");
    competence_2 = new Competence("");
    competence_3 = new Competence("");
    name: string;
    cost: number;
    time: number;
    ...
}

技能类别:

export class Competence {
    name: string;
    mastery: string;
    specialisation_1: string;
    specialisation_2: string;
    specialisation_list: Array<string>;

    constructor(name: string) {
        this.name = name;
        this.specialisation_list = new Array<string>();
    }
}

预期结果:当我在列表“competence_1_name”中选择一个值时,列表“competence_1_spe_1”会更新

实际结果:即使我在列表“competence_1_name”中选择一个值,列表“competence_1_spe_1”中也没有值


事情并没有那么复杂。使用下面的代码(相应地进行调整)。

    <form #f="ngForm">
  <select name="selectedCompetence" [(ngModel)]="selectedCompetence">
    <option *ngFor="let item of competences" [ngValue]="item">{{item.name}}</option>
  </select>

  <br />

  <select  name="selectedSpl" [(ngModel)]="selectedSpl">
    <option *ngFor="let item1 of selectedCompetence.specialisation_list" [value]="item1">{{item1}}</option>
  </select>

  <pre>{{f.value | json}}</pre>
</form>

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

当列表初始化为空时使用 ngFor 创建 mat-option 元素 的相关文章

  • Angular 2 测试 ng-content

    我想知道是否有办法测试ng content不创建宿主元素 例如 如果我有警报组件 Component selector app alert template div div
  • 如何在 Angular 模板中嵌入 GitHub gist?

    角度忽略script其模板中包含标签 但加载 GitHub gist 需要它们 执行此操作的最佳做 法是什么 使用iframe 创造script动态标记 或者是其他东西 一种方法是创建一个iframe with script里面并在你希望你
  • 无法分配给对象“#”的只读属性“detachedCallback”

    我安装了A Frame https github com aframevr aframe by npm install aframe save 当我使用时 import aframe or use require aframe import
  • Angular2排序数组用于在html中的*ngFor中显示

    我正在循环浏览所有帖子 li 当显示每个帖子的日期时 我会执行以下操作 post date date yyyy MM dd HH mm ss 我想要做的是按最新的第一个顺序显示所有帖子 我尝试过使用类似的管道 li li import Pi
  • 在电子打印中构建的角度应用程序显示空白窗口

    我开发了一个角度应用程序 然后在电子中构建该应用程序 该应用程序工作正常 但是当我单击按钮打印特定 div 时 它会打开一个电子的空白窗口 我用ngx print图书馆 它在角度服务方面效果很好 但在电子构建方面遇到了问题
  • 垫子图标不显示图标

    我喜欢有角度的材料的设计 但使用它可能会很痛苦 该网站展示了一个使用的示例
  • 浮动标签和占位符重叠

    div class form group form default form spacing div
  • Angular 5 中使用 rxjs 进行持久订阅

    我对 Angular 5 中的 rxjs 仍然有点陌生 并且很难表达我的问题 我仍然希望得到一些提示 我经常会得到相同的设置 多个组件显示相同的数据 访问数据的单个服务 现在通过 Observables 接收数据时我有 2 个选择 a 订阅
  • 401 Unauthorized("detail":"未提供身份验证凭据。")

    我在后端使用 djoser 的身份验证 当我通过具有内容类型和授权标头的邮递员在 account me 发出获取请求时 我得到了正确的响应 但是当我尝试从我的角度客户端执行相同的请求时 我得到401 Unauthorized detail
  • 如何在 Angular2 中为表单分配和验证数组

    我的模型 this profile 在 javascript 中有一个属性叫做emails 这是一个数组 email isDefault status 然后我将其定义如下 this profileForm this formBuilder
  • 无法在 Angular 4 中使用自定义主题

    我正在尝试在我的角度项目中使用我的自定义主题 它没有按预期工作 我收到以下错误 node modules css loader sourceMap false importLoaders 1 node modules postcss loa
  • ngrx 存储是否持久?

    ngrx 存储是否持久 换句话说 我们可以关闭浏览器重新打开它 并检索添加到ngrx 商店 https github com ngrx platform 目前 ngrx store 不支持此类功能 但是您可以通过使用类似的库来维护状态ngr
  • 如何测试包含自定义表单控件的组件?

    我有一个这样的组件 Component selector app custom form control templateUrl
  • Angular *ngFor 循环遍历数组的数组

    我有一个数组 其中包含其他数组 如下所示 array element A element B YES NO 我想使用 ngFor 循环遍历 HTML 表中的这个对象数组 table thead tr th th th COLUMN 1 th
  • Angular2 与 Jquery-ui 滑块

    我尝试将 Jquery ui 滑块与 angular2 一起使用 我想让变量 slideValue 显示滑块的值 但我不知道如何将我的模型或变量从角度绑定到滑块 这是我的滑块组件 import Component ElementRef In
  • 在 Angular 9 应用程序的生产中同时使用 AOT 和 JIT

    因此 我一直在构建一个 Angular 9 应用程序 其中有一个客户仪表板来管理保存在服务器上的模板 这些模板可以通过激活系统在不同的设备上查看 因此设备与用户绑定 所以让我们说https templates com我们有 login da
  • 修剪日期格式 PrimeNG 日历 - 删除时间戳、角度反应形式

    我将以下内容推入我的反应形式 obj 中2016 01 01T00 00 00 000Z但我想要以下2016 01 01 有谁知道有一个内置函数可以实现上述目的 我已经搜索过文档here https www primefaces org p
  • 为什么 Angular 2 项目如此大 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我们正在用 ng2 重写 ng1 项目 我们的 ng1 项目构建后大约有 8mb 我们对 ng2 的重写已经完成了大约四分之一 并且我
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • 如何显示 GroupList 的 FormArray?

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup

随机推荐

  • 犰狳安装

    您好 我按照 README txt 的说明将 Armadillo3 0 1 安装在我自己的工作目录 home me package armadillo3 0 1 中 但是当我尝试一个例子时 g I home me package armad
  • 在 OSX 上替换 libstdc++.dylib (4.0) 全局新建和删除运算符

    我正在努力用 XCode 3 2 GCC 4 2 libstdc 4 0 动态版本替换全局 new 和删除运算符 我直接从标题 new 中获取原型并实现它们 它们粘贴在下面 该项目是一个 plugin 因此是一个动态库 该插件必须将分配委托
  • 了解 Python 如何“编译”或“解释”函数对象

    我已阅读以下帖子 但我仍然不确定某些事情 Python编译 解释过程 https stackoverflow com questions 3299648 python compilation interpretation process 为
  • 处理 Ember.js 中的验证错误

    我有一个 Rails 应用程序 为 Ember 前端提供 json 服务 我正在尝试在客户端的表单上显示验证错误 Rails 返回这个 json errors hometown is too long maximum is 64 chara
  • 同时将 AuthorizeAttribute 应用于控制器类和操作

    是否有一种方法可以在具有 Authorize 属性的控制器类的一个操作中忽略 Authorize 属性 Authorize public class MyController Controller Authorize Users I tri
  • 根据添加到主屏幕的 URL 在 Web 应用程序清单中设置 start_url

    我的网站有几个小部分 当用户将网站添加到他们的主屏幕时 我想确保主屏幕图标将他们启动到他们添加到主屏幕时所在的小部分 我可以为每个小节注册不同的清单 但这对于没有页面重新加载的单页应用程序不起作用 我正在考虑将小节存储在 cookie 中
  • 使用 C# 编码波斯语字符串

    我正在开发一个短信应用程序 使用C 对于通过 SMS 网关向客户发送交易警报 即 ATM 交易 的银行 该应用程序工作正常 唯一的问题是编码波斯语文本 它没有正确编码波斯语文本 以下是将波斯语文本编码为 UTF 16 格式的方法 publi
  • 如何从 .pb 转换为 .tflite?

    我使用创建了一个对象检测模型Pytorch然后转换自 pth to onnx进而 pb 但现在我需要将其转换为 tflite适用于 Android 应用程序 怎么做 这是我第一次 input arrays 64 3 224 224 outp
  • 编译Linux内核错误xt_CONNMARK.h

    由于非常具体的原因 我尝试编译 Linux 2 6 32 6 内核 并在内核中内置了多个模块 我已将根文件系统包含在 NFS 上 以尝试通过 LAN PXE 启动我自己的自定义救援 Live CD 在包含 ROOT NFS 所需的依赖项和模
  • 是否可以在不编写新文件的情况下将文本合成语音?

    我想使用 GCP 文本到语音 API 合成文本到语音 几乎我能找到的每个示例都会写入一个新文件 我想在该函数输入文本并通过计算机扬声器读取它时执行此操作 我一直在尝试转换 GCP 上传的代码 表示 你好 世界 我还没有找到一种方法可以在转换
  • 将 SelectSingleNode 与 XPath 结合使用会返回 NULL

    我尝试修改 XML 文件SelectSingleNode 文件的结构是
  • Rails 安装错误:“原子”本机 gem 需要安装构建工具[重复]

    这个问题在这里已经有答案了 我正在我的 Windows 上安装 Rails 3 我安装了最新的 ruby 2 0 0 并更新了 gems 但是当我使用 gem install Rails 安装 Rails 时 成功的消息来了 但最后我发现
  • 自定义字体连字

    我正在使用 Visual Studio Code 我看到所有这些很酷的字体连字 用于双等号和三等号 箭头等 我不禁想知道是否有任何方法可以向字体或 VS Code 添加新的自定义连字 我尝试进行一些网络搜索 但似乎找不到任何内容 例如 当我
  • Ansible 内置 Lineinfile 到 ~/.bashrc

    我对 ansible 比较陌生 所以如果这个问题遗漏了一些东西 我很抱歉 我的目标是添加一行 bashrc使用 ansible 文件 我认为最好的方法是ansible builtin lineinfile module 不幸的是 我已经运行
  • AttributeError:无法设置 python 列表属性的属性

    我正在与python docx来自分叉的库version https pypi org project bayoo docx 并且我在编辑元素列表时遇到问题 因为它被定义为属性 docx document Document property
  • 我什么时候应该使用 Rosette 的浅嵌入与深嵌入进行程序综合?

    一些教程Rosette https docs racket lang org rosette guide index html引入程序综合使用浅嵌入 https docs racket lang org rosette guide ch e
  • 无法使用无头模式 Selenium 定位元素

    由于 所有用户在访问我们的网站时必须使用谷歌浏览器 这一限制 我无法使用无头模式定位元素 此限制是由我们的管理员添加的 因此用户只能使用 Google Chrome 我的代码是 Test priority 1 public void set
  • 套接字和管道的 select.select 问题

    我目前正在编写一个使用管道和套接字的基本 python 脚本 管道当前保存来自 html 表单的传入数据 套接字建立与服务器的连接 以不同的时间间隔发送 TCP IP 命令 表单和服务器位于同一 LAN 但不同的计算机上 我的代码如下 us
  • MaterialiseCSS 卡片设计

    我正在尝试使用 Materializecss com 在我的个人网站中调整 Material Design 但是该框架仅提供在 CARD 设计之上排除其他图像的选项 我想实现如下链接 第 2 行 第 2 列 最后一张图片 中所示的目标 其中
  • 当列表初始化为空时使用 ngFor 创建 mat-option 元素

    当我在 能力 mat select 中选择一项技能时 我想更新 专业化 mat select 中的值 我使用以下命令将我的 var 与模型链接起来 ngModel 但它不会更新列表 我尝试使用 ngModel 角度和材质为 7 HTML