无法在离子 4 中使用“离子步进器”

Question

我正在尝试在我的 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)

Answer 1

如果你想使用这个：

• https://github.com/HsuanXyz/ionic-stepper

似乎它可能不支持 Ionic 4。关于这个有two unanswered issues。

Answer 2

重要的不是 ionic 版本，而是使用 ivy 渲染引擎的 angular 的更高版本阻止了该库的导入，因此请联系该库的作者，或者如果您愿意，可以尝试重构它。 否则，您可以考虑使用 mat-stepper 或 premng 或任何其他有用的支持来加载步进器