我使用Angular 7.2创建一个选择控件,如下所示:
<mat-select placeholder="Organisation Type" [formControl]="codeSelect" multiple (selectionChange)="changeValue($event)">
<mat-select-trigger>
{{codeSelect.value ? codeSelect.value[0] : ''}}
<span *ngIf="codeSelect.value?.length > 1" class="example-additional-selection">
(+{{codeSelect.value.length - 1}} {{codeSelect.value?.length === 2 ? 'other' : 'others'}})
</span>
</mat-select-trigger>
<mat-option *ngFor="let org of orgSelectList" [value]="org.orgCode">{{org.orgDisplay}}</mat-option>
</mat-select>
</mat-form-field>
这正是我们想要的。我有一些代码希望删除选定的项目,大致如下:
let x = this.codeSelect.value.findIndex(x => x == itemToBeRemoved);
if (x > -1) {
this.codeSelect.value.splice(x, 1);
}
虽然这会将其从选定项的数组中删除。如果我从选择控件中选择新值,则所有原始项仍被选中(即勾选)。
如何清除所选项目?
根据@Maarti的响应,我的代码现在可以使用
let x = this.codeSelect.value.findIndex(x => x == itemToBeRemoved);
if (x > -1) {
this.codeSelect.value.splice(x, 1);
}
this.codeSelect.setValue(this.codeSelect.value);
FormControl.value
是只读的,您应该使用FormControl.setValue
来代替:
this.codeSelect.setValue(this.codeSelect.value.slice(1))
我需要能够从角材料列表中删除选定的项目。为此,我决定从初始项目数组中减去选定项目数组(不确定这是最好的方法)。 我的问题是,我找不到一种方法来将超文本标记语言中的选定项数组传递给TS并使用它。 Angular材料在其留档中有以下示例: 其中x是mat-seltion-list选择器的ID,y是对所选元素执行的操作。但这似乎只适用于超文本标记语言。 下面是我不工作的代码。 HTML,其中我设置了列表
我有一个mat select,其中的选项是数组中定义的所有对象。我试图将该值设置为其中一个选项的默认值,但是当页面呈现时,该值处于选中状态。 我的typescript文件包含: 我的HTML文件包含: 我已尝试将和
我使用的是:Angular 4.4.5@Angular/Material:2.0.0-beta.12
我正在尝试使用一个有角度的材质(7.0)选择列表,如下所述。 页面上的示例代码片段是 使用TS文件中定义的,如其代码片段所述: 对我来说很有意义,但是当我尝试编译时,我得到了错误: 我已将导入到我的应用程序模块中。 我没有看到与要导入的列表选项相关的其他模块。 我错过了什么?
问题内容: 如何从选择框中删除项目或向其中添加项目?我正在运行jQuery,这应该使任务更轻松。下面是一个示例选择框。 问题答案: 删除一个选项: 添加一个选项:
> 到目前为止,我使用角2快速入门创建了一个新项目。 我决定开始使用angular 2 cli,并创建了一个新的angular 2 cli项目。 移动了我的所有文件并重新安装了所有软件包。 现在,当我试图在CLI项目中使用角2材料时,我遵循了这里的指南,但这是我得到的: 会出什么问题?