如何在角度材料2中选择默认项目选择多个

2024-03-20

我正在开发 Angular 2 Material 应用程序,我有一个情况,其中存在多选元素,并且我有一个带有复选框的列表,因此我可以一次选择多个项目。我可以使用角度材质组件来实现这一点,但我想要的是默认检查 2-3 个项目,如果我选择/取消选择特定项目,那么我应该将检查/选择标志设置为 true/false。

<md-select multiple="true" [(mgModel)]="test">
  <md-option *ngFor="let l of list" [value]="l">
    {{l.name}}
  </md-option>
</md-select>

var list = [{name:'abc'},{name:'cbv'},{name:'hgf'},{name:'rty'},{name:'fdv'},{name:'vbg'}]

var test = [{{name:'abc'},{name:'cbv'}]

有没有其他方法或者我在某些地方出错了。


如果你绑定object to option of select, Angular 将通过对象实例比较默认值和选项值。这里{name: 'abc'} and {name:'cbv'} of list and test具有相同的字段和值,但它们保留不同的实例。所以没有人会解决selected.

@yurzui 的答案将通过在两个数组中保留相同的对象实例来工作。

另一个解决方案(您不需要保留相同的对象实例)是使用compareWith指令,参见docs https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection。这样你应该实现一个compareWith函数来告诉Angular如何在对象之间进行比较。

<md-select multiple="true" [(ngModel)]="test" [compareWith]="compareWithFunc">
  <md-option *ngFor="let l of list" [value]="l">
    {{l.name}}
  </md-option>
</md-select>

compareWithFunc(a, b) {
  return a.name === b.name;
}

see demo https://stackblitz.com/edit/angular-7s4hrb?file=app%2Fselect-value-binding-example.html.

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

如何在角度材料2中选择默认项目选择多个 的相关文章

  • 让管道自我刷新角度

    我有来自后端的静态时间戳 我想每 1 秒刷新一次管道以获取现在的日期 这是我的烟斗 import Pipe PipeTransform from angular core import moment from moment Pipe nam
  • rxjs 7 更新 - 主题 - 预期 1 个参数,但得到 0 个

    我将 rxjs 从版本 6 x x 更新到 7 x x 但出现以下错误 src app app component ts 中出现错误 12 19 预期有 1 个参数 但得到 0 个 当试图next一个空值Subject destroy ne
  • 如何使用 Angular4 进行 Codeigniter 视图?

    首先 我的 PHP Codeigniter 项目当前在服务器上运行 然后我在服务器上安装了最新的 Angular4 CLI Typescript 但我不知道如何与Codeigniter项目集成 如何像 AngularJS 一样在 Codei
  • [karma-server]:类型错误:无法读取未定义的属性“范围” - CI 环境中的 Angular 单元测试

    我们的 CI CD 管道停止处理 ng test 作业并失败并显示以下错误消息 karma server TypeError Cannot read property range of undefined at handleRangeHea
  • gyp ERR,Npm 无法获取本地颁发者证书

    我正在致力于 Windows 10 的全新安装 唯一的事情是我安装了 cygwin 以在 cmd 中获取 unix 命令 当我打字时npm install g angular cli它下载了必要的文件 但我收到错误 gyp ERR conf
  • 垫子图标不显示图标

    我喜欢有角度的材料的设计 但使用它可能会很痛苦 该网站展示了一个使用的示例
  • Angular 2 - 加载时共享服务

    我正在尝试将服务共享给组件 为此 我创建了 service ts 其中代码如下 import Subject from rxjs Subject export class CommonService CommonList new Subje
  • Webpack 在 Angular 的 ng 服务中的作用

    我是 Angular 的新手 想知道当我们为应用程序提供服务时 Webpack 在幕后扮演什么角色 在最初的印象中 我开始知道 webpack 是一个构建和打包工具 它将所有必需的 JS 文件分组到单独的包中 然而 我无法找到 webpac
  • 发生未处理的异常:工作区中未设置配置“生产”

    您好 在 Angular 8 中创建了一个项目 最初它仅支持一种默认语言 US EN 然后我应用了本地化 在准备生产构建的本地化之前 我曾经给出以下命令 ng build prod base href Windchill com qiwkC
  • 跨延迟加载路由创建共享模块

    我正在构建一个 Angular 11 应用程序并尝试创建一个SharedModule 我正在使用延迟加载 并希望避免在延迟加载的路由中多次加载公共模块 我创建了一个共享模块并将其导入到我的AppModule 根据我的理解 这个共享模块应该在
  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动
  • 如何在 RxJS 订阅方法中等待

    在 RxJS 主题的订阅回调内部 我想要await on an async功能 下面是打字稿转译器抱怨的代码示例 错误 131 21 TS2304 找不到名称 await async ngOnInit this subscriber dat
  • ngrx 存储是否持久?

    ngrx 存储是否持久 换句话说 我们可以关闭浏览器重新打开它 并检索添加到ngrx 商店 https github com ngrx platform 目前 ngrx store 不支持此类功能 但是您可以通过使用类似的库来维护状态ngr
  • 显示在 Angular 5 中作为 Blob 对象接收的图像

    我正在开发一个 MEAN Stack 应用程序 我想做的是显示存储在数据库中的图像 这样后端就可以工作 但我真正的问题是在前端Angular所以我这样做了 首先从后端接收图像 我做了一个服务来做到这一点 Function to get us
  • 包 [email protected] 不满足其同级包的对等依赖性要求?

    我正在尝试在我的 Angular 2 应用程序中安装 ngrx store 模块 我正在使用 npm install 并收到以下错误 npm ERR peerinvalid The package email protected cdn c
  • MatAutocomplete 值 X 显示

    我的自动完成显示具有以下定义的对象的值 export class Person id number name string cityName string 这是自动完成模板
  • Angular2:鼠标事件处理(相对于当前位置的移动)

    我的用户应该能够通过鼠标在画布中移动 或旋转 对象 当鼠标事件发生时 屏幕坐标用于计算与最后一个事件的增量 方向和长度 没什么特别的 mousedown 获取第一个坐标 mousemove 获取第n个坐标 计算deltaXY 按deltaX
  • 如何使用 Angular 2 动画实现翻转效果?

    我一直在我的项目中使用纯CSS翻转卡片 但这个解决方案不是合适的 有人可以通过点击按钮来呈现角度 2 的翻转吗 我在 angularjs 中找到了一个https codepen io Zbeyer pen oXQrZg https code
  • 修剪日期格式 PrimeNG 日历 - 删除时间戳、角度反应形式

    我将以下内容推入我的反应形式 obj 中2016 01 01T00 00 00 000Z但我想要以下2016 01 01 有谁知道有一个内置函数可以实现上述目的 我已经搜索过文档here https www primefaces org p
  • 415 不支持的媒体类型; Angular2 到 API

    我是 Angular 2 的新手 我面临着一个无法找到解决方案的问题 当我尝试从 Angular 2 发布到 API 时 我得到 415 不支持的媒体类型 角度2代码 onSubmit value any console log value

随机推荐