angular - 无法在离子 4 中使用“离子步进器”
问题描述
我正在尝试在我的 ionic4 应用程序中使用 ion-stepper,但它给了我这个异常,首先我收到“ionic-angular”错误,所以因为我使用的是 ionic4,所以我不得不将其更改为 @ionic/angular 错误,但我不知道如何解决这个问题,因为它说 ngIf 没有定义,但我没有在我的 html 中使用任何 ngIf 条件。
Can't bind to 'ngIf' since it isn't a known property of 'div'. (" [active]="i <= selectedIndex">
</ion-step-header>
<div [ERROR ->]*ngIf="!isLast" class="ionic-stepper-horizontal-line"></div>
</ng-container>
</div>
"): ng:///IonicStepperModule/IonicStepperComponent.html@11:15
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
[active]="i <= selectedIndex">
</ion-step-header>
[ERROR ->]<div *ngIf="!isLast" class="ionic-stepper-horizontal-line"></div>
</ng-container>
</div>
"): ng:///IonicStepperModule/IonicStepperComponent.html@11:10
Can't bind to 'ngForOf' since it isn't a known property of 'ng-container'.
1. If 'ngForOf' 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. ("ontal-container">
<div class="ionic-stepper-horizontal-header-container">
<ng-container [ERROR ->]*ngFor="let step of _steps; let i = index; let isLast = last">
<ion-step-header [index]="i""): ng:///IonicStepperModule/IonicStepperComponent.html@3:21
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("-stepper-horizontal-container">
<div class="ionic-stepper-horizontal-header-container">
[ERROR ->]<ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
<ion-step-head"): ng:///IonicStepperModule/IonicStepperComponent.html@3:7
Can't bind to 'ngTemplateOutlet' since it isn't a known property of 'ng-container'.
1. If 'ngTemplateOutlet' 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. ("<div class="ionic-vertical-content" *ngIf="i === selectedIndex">
<ng-container [ERROR ->][ngTemplateOutlet]="step.content"></ng-container>
</div>
</div>
"): ng:///IonicStepperModule/IonicStepperComponent.html@20:35
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("talStepTransition]="getAnimationDirection(i)">
<div class="ionic-vertical-content" [ERROR ->]*ngIf="i === selectedIndex">
<ng-container [ngTemplateOutlet]="step.content"></n"): ng:///IonicStepperModule/IonicStepperComponent.html@19:53
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("-content"
[@horizontalStepTransition]="getAnimationDirection(i)">
[ERROR ->]<div class="ionic-vertical-content" *ngIf="i === selectedIndex">
<ng-container ["): ng:///IonicStepperModule/IonicStepperComponent.html@19:17
Can't bind to 'ngForOf' since it isn't a known property of 'ng-container'.
1. If 'ngForOf' 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. ("
</ng-container>
</div>
<ng-container [ERROR ->]*ngFor="let step of _steps; let i = index; let isLast = last">
<div class="ionic-stepper-hori"): ng:///IonicStepperModule/IonicStepperComponent.html@14:18
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
</ng-container>
</div>
[ERROR ->]<ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
<div class="ioni"): ng:///IonicStepperModule/IonicStepperComponent.html@14:4
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("
<div [ERROR ->]*ngIf="mode === 'horizontal'" class="ionic-stepper-horizontal-container">
<div class="ionic-step"): ng:///IonicStepperModule/IonicStepperComponent.html@1:5
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
[ERROR ->]<div *ngIf="mode === 'horizontal'" class="ionic-stepper-horizontal-container">
<div class="ionic"): ng:///IonicStepperModule/IonicStepperComponent.html@1:0
Can't bind to 'ngTemplateOutlet' since it isn't a known property of 'ng-container'.
1. If 'ngTemplateOutlet' 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. ("ction(i)">
<div class="ionic-vertical-content">
<ng-container [ERROR ->][ngTemplateOutlet]="step.content"></ng-container>
</div>
</div>
"): ng:///IonicStepperModule/IonicStepperComponent.html@42:35
Can't bind to 'ngForOf' since it isn't a known property of 'ng-container'.
1. If 'ngForOf' 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. ("
<div *ngIf="mode === 'vertical'" class="ionic-stepper-vertical-container">
<ng-container [ERROR ->]*ngFor="let step of _steps; let i = index; let isLast = last">
<ion-step-header [index]="i"
"): ng:///IonicStepperModule/IonicStepperComponent.html@28:18
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
<div *ngIf="mode === 'vertical'" class="ionic-stepper-vertical-container">
[ERROR ->]<ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
<ion-step-header"): ng:///IonicStepperModule/IonicStepperComponent.html@28:4
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("
</div>
<div [ERROR ->]*ngIf="mode === 'vertical'" class="ionic-stepper-vertical-container">
<ng-container *ngFor="let s"): ng:///IonicStepperModule/IonicStepperComponent.html@27:5
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
</div>
[ERROR ->]<div *ngIf="mode === 'vertical'" class="ionic-stepper-vertical-container">
<ng-container *ngFor=""): ng:///IonicStepperModule/IonicStepperComponent.html@27:0
at syntaxError (compiler.js:2430)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158)
at compiler.js:26101
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101)
at compiler.js:26011
at Object.then (compiler.js:2421)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
解决方案
重要的不是 ionic 版本,它是使用 ivy 渲染引擎的 angular 的后期版本,它阻止了这个库的导入,所以要么联系这个库的作者,或者如果你愿意,你可以尝试重构它。否则,您可以考虑使用 mat-stepper 或 premng 或任何其他有用的支持来加载步进器
推荐阅读
- python - 使用线程读取文件
- python - 在 Python 中运行 Powershell 命令(SyntaxError:无效语法)
- javascript - Ajax 响应多次
- php - 为什么即使 href 字符串看起来正确,自定义面包屑链接都将转到索引页面?
- neo4j - Neo4j:WHERE NOT 返回不正确的节点
- python - Pandas:检查两个数据框的匹配值,然后根据标签填充一行
- codeigniter - Google Analytics(分析)中报告的唯一身份访问者数量与自定义唯一身份访问者计数跟踪的数量之间存在巨大差异
- uwp - UWP的TextBox中的下划线文本字体?
- java - 一个类是否持有对其字段对象的引用?
- c# - Rx.Net - 将函数变量转换为 Observable 流