我想在我的应用程序上添加Angular Material Paginator.
在模块中添加了MatPaginatorModule.
<mat-paginator #paginator
[length]="100"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
但它给出了一个错误:
未捕获错误:模板解析错误:
无法绑定到'length',因为它不是'mat-paginator'的已知属性.
mat-paginator是Angular组件并且它有length输入,则验证它是否是此模块的一部分.mat-paginator是一个Web组件,然后添加CUSTOM_ELEMENTS_SCHEMA到@NgModule.schemas该组件来抑制此消息.
也许我错过了什么？
"@angular/animations": "^5.0.1",
"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.0.0-rc0",
pagination angular-material2 angular angular5 angular-material-paginator
以下在Angular 4中运行良好
<ng-container *ngFor="let user of list_users">
<div *ngIf="currentUser.username !== user.username">
<div class="card">
bla bla
</div>
</div>
</ng-container>
Angular 5抱怨这个错误:
Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
1. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<!-- CUSTOM TEMPLATE -->
<ng-template
[ERROR ->][ngOutletContext]="{ item: model, index: index }"
[ngTemplateOutlet]="template">
"): ng:///TagInputModule/TagComponent.html@12:12
Property binding ngOutletContext …我一直在阅读一些关于此的文章,但它们似乎在几种不同的方式上存在冲突.我希望重新创建与最新版角度材料[5.0.0-rc0] 的角度材料文档站点相同的主题切换
我有两个自定义主题,这是custom-theme.scss,并且有light-custom-theme.scss几乎相同,没有mat-dark-theme
@import '~@angular/material/theming';
$custom-theme-primary: mat-palette($mat-blue);
$custom-theme-accent: mat-palette($mat-orange, A200, A100, A400);
$custom-theme-warn: mat-palette($mat-red);
$custom-theme: mat-dark-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include angular-material-theme($custom-theme);
我的styles.scss看起来像这样
@import '~@angular/material/theming';
@include mat-core();
@import 'custom-theme.scss';
@import 'light-custom-theme.scss';
.custom-theme {
@include angular-material-theme($custom-theme);
}
.light-custom-theme {
@include angular-material-theme($light-custom-theme);
}
然后在index.html中调用它 <body class="mat-app-background">
当我做一个主题时,一切正常.但我试图在两者之间切换.将两个主题添加到angular-cli.json中,light-custom-theme接管
"styles": [
"styles.scss",
"custom-theme.scss",
"light-custom-theme.scss"
],
我在我的一个组件中有以下代码来处理切换主题
toggleTheme(): void {
if (this.overlay.classList.contains("custom-theme")) {
this.overlay.classList.remove("custom-theme");
this.overlay.classList.add("light-custom-theme");
} else if (this.overlay.classList.contains("light-custom-theme")) {
this.overlay.classList.remove("light-custom-theme");
this.overlay.classList.add("custom-theme");
} else {
this.overlay.classList.add("light-custom-theme");
}
}
但无论何时运行,主题都保持不变.对于它的价值,在overlay.classList中的位置0处已经存在"cdk-overlay-container"对象
0:"cdk-overlay-container"
1:"custom-theme"
length:2
value:"cdk-overlay-container custom-theme"
我不确定如何调试这个,因为角度材料文档没有给我太多的工作,任何帮助将是赞赏! …
我是Angular 5项目的新手.我跑去ng build --prod生成一个dist/文件夹.
我注意到构建需要相当长的时间,当我打开我的dist/文件夹时,我看到它有近98%无用的东西,比如SVG,图像等等.
我如何控制进入我的内容dist/？
.angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "web"
},
"apps": [{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/ngx-toastr/toastr.css",
"../src/assets/css/style.css",
"../src/assets/css/colors/blue.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
"../node_modules/pace-js/pace.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}],
"e2e": {
"protractor": {
"config": "./protractor.conf.js" …我正试图在我的角度5.2应用程序中重新加载我的导航而没有任何成功.如果参数不变,角度路由器将忽略我的导航.
我如何导航:
this.router.navigate(['/search', buildParamsFromSearchCriteria(criteria)]);
导航到:
/search;pageSize=20;page=1;orderBy=price;sortDirection=ASCENDING
我的模块配置:
imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules, enableTracing: false, onSameUrlNavigation: 'reload' })],
我想通过单击body标签上的按钮动态添加一个 CSS 类。所以我使用DOCUMENTangular的对象。这是代码
import { DOCUMENT } from "@angular/platform-browser";
... component code
constructor( @Inject(DOCUMENT) private document: Document) { }
addClass() {
this.document.body.classList.add("any_class");
}
但这显示错误
Metadata collected contains an error that will be reported at runtime: Could not resolve type Document.
[0] {"__symbolic":"error","message":"Could not resolve type","line":50,"character":53,"context":{"typeName":"Document"}}
[0] at \node_modules\@angular\compiler-cli\src\metadata\collector.js:664:27
[0] at Array.forEach (<anonymous>)
[0] at validateMetadata (D:\QPP Workspace\QWC\QWC\node_modules\@angular\compiler-cli\src\metadata\collector.js:652:42)
[0] at MetadataCollector.getMetadata (D:\QPP Workspace\QWC\QWC\node_modules\@angular\compiler-cli\src\metadata\collector.js:507:17)
[0] at LowerMetadataCache.getMetadataAndRequests (ProjectPath\node_modules\@angular\compiler-cli\src\transformers\lower_expressions.js:264:39)
[0] at LowerMetadataCache.ensureMetadataAndRequests (ProjectPath\node_modules\@angular\compiler-cli\src\transformers\lower_expressions.js:209:27)
[0] at LowerMetadataCache.getRequests (ProjectPath\node_modules\@angular\compiler-cli\src\transformers\lower_expressions.js:204:21)
[0] at …Angular - 以编程方式提交表单.
我在HTML上有一个表单组,我希望组件使用post方法中的电子邮件字段提交表单的操作.而不是使用正常的提交按钮.
下面的testMethod从另一个按钮调用.在这个方法中,我想发布testForm.它必须以旧学校的方式发布,因为它需要一个动作.
这是我的HTML:
<form
[formGroup]="testGroup"
[action]='actionLink'
method='POST'
#testForm>
<input name='Email' type='hidden' [value]='currentUserEmail'>
</form>
这是我的Component TS文件尝试:
@ViewChild('testForm') testFormElement;
public currentUserEmail: string = '';
public testGroup = this.formBuilder.group({
Email: ''
});
public testMethod(): void {
// Below: This currently doesnt seem to do anything.
this.testFormElement.ngSubmit.emit();
}
我想从组件加载模态.在Angular Material文档中写入以在entryComponents中添加模态组件:
这个 :
@NgModule({
imports: [
CommonModule,
AidesRoutingModule
],
declarations: [TypesAidesComponent, TypesAidesAjouterComponent],
entryComponents : [TypesAidesAjouterComponent]
})
export class AidesModule {
}
在TypesAidesComponent中,我想要使用TypesAidesAjouterComponent打开对话框:
let dialog = this.dialog.open(TypesAidesAjouterComponent);
dialog.afterClosed().subscribe(res => {
if(res){
this.collection.addItem(res);
}
});
我在一个组件延迟加载:
{
path: 'types-aides',
loadChildren: 'app/modules/aides/aides.module#AidesModule'
},
但我有这个错误:
错误:找不到TypesAidesAjouterComponent的组件工厂.你有没有把它添加到@ NgModule.entryComponents？
我找到了一个解决方案,它是移动删除LazyLoading,但我的应用程序很大,不可能.
你有什么建议吗 ？
我对Angular的世界很新.CommonModulevs 之间有什么区别BrowserModule？为什么一个应该优先于另一个？
我使用角度材料datepicker指令,我有几个问题.
1.当我打开日期选择器对话框并选择任何日期时,日期显示在输入文本框中,但我想在输入文本框中发生任何更改时调用函数.
现在,如果我在输入文本框中手动输入任何值,我使用(输入)指令触发函数,它正常工作,如代码所示.我希望在使用日期选择器对话框更改日期时触发相同的功能.
2.当从日期选择器对话框中选择时,我还想将日期格式从mm/dd/yyyy更改为dd/mm/yyyy.这里,mm/dd/yyyy在此指令中默认设置.
<input matInput [matDatepicker]="organizationValue" formControlName="organizationValue" (input)="orgValueChange(i)">
<mat-datepicker-toggle matSuffix [for]="organizationValue"></mat-datepicker-toggle>
<mat-datepicker #organizationValue></mat-datepicker>