"dependencies": {
"@angular/cdk": "5.0.4",
"@angular/common": "~5.2.0",
"@angular/compiler": "~5.2.0",
"@angular/core": "~5.2.0",
"@angular/flex-layout": "2.0.0-beta.12",
"@angular/forms": "~5.2.0",
"@angular/material": "5.0.4"
}
-src
-app
-myComponent
-myComponent.component.html
-myComponent.component.ts
-myCompnent.module.ts
-shared
-material
-material.module.ts
-shared.module.ts
import { FormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material';
@NgModule({
providers: [],
imports: [
FormsModule
],
exports: [
MatSelectModule
]
})
export class CustomMaterialModule {
}
import { CustomMaterialModule } from './material/material.module';
@NgModule({
exports: [
CustomMaterialModule
],
declarations: []
})
export class SharedModule {
}
import { SharedModule } from "../shared/shared.module";
@NgModule({
imports: [
SharedModule,
],
declarations: [myComponent],
exports: [myComponent]
})
export class myComponentModule { }
export class myComponent {
toppings = new FormControl();
toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
<mat-form-field>
<mat-select placeholder="Toppings" [formControl]="toppings" multiple>
<mat-select-trigger>
{{toppings.value ? toppings.value[0] : ''}}
<span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
(+{{toppings.value.length - 1}} others)
</span>
</mat-select-trigger>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
我在执行时出现了这个错误:
Can't bind to 'formControl' since it isn't a known property of 'mat-select'.
1. If 'mat-select' is an Angular component and it has 'formControl' input, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
我错过了什么?
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
// ...
ReactiveFormsModule,
],
// ...
})
export class AppModule {}
如何使用Typescript而不是HTML从NgIf的HTML DOM视图中移除元素?寻找相似的语法。 更喜欢在打字稿中遍历数组,并从视图中删除项目,而不是用NgIF包装所有20个表单控件,这似乎有点重复。 当前使用的是Formbuilder,而不是FormArray。这个链接将样式显示为“无”,从我的阅读来看,这不是Angular的理想实践。这是真的吗? 角度2 - 我们有排除数组,并且更喜欢在
本文向大家介绍angular中使用Socket.io实例代码,包括了angular中使用Socket.io实例代码的使用技巧和注意事项,需要的朋友参考一下 服务端(nodeJs/express): 客户端,创建一个ChatService ChatComponent 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍在 Angular 中使用Chart.js 和 ng2-charts的示例代码,包括了在 Angular 中使用Chart.js 和 ng2-charts的示例代码的使用技巧和注意事项,需要的朋友参考一下 Chart.js是一个流行的JavaScript图表库,ng2图表是Angular 2+的包装器,可以轻松地将Chart.js集成到Angular中。 我们来看看基本用法。 安装
在模板中使用自定义管道时,如下所示: 而且效果很好。 但它表明 用户名未定义
了解如何使用 Dreamweaver的“代码片段”面板创建代码片段并在不同的 Dreamweaver 站点上重用代码。 如果您发现自己多次重复代码块,可以使用代码片段加快编写代码的过程。写入该代码一次,将其保存为一个代码片段,然后在“代码片段”面板中双击它,以将它插入到多个位置。 使用“代码片段”面板创建的代码片段不是针对特定站点的,因此可以跨站点重用它们。您还可以使用同步设置跨不同设备、Drea
我试图用innerHTML绑定/呈现html内容,但无法呈现{{…}在角度上。 代码如下: 结果 这是测试代码,我正在尝试用angular..绑定/呈现{test}代码。。, 未绑定/呈现测试变量值。。。。