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

似乎它可能不支持Ionic4。对此有two unanswered issues。

Answer 2

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

无法在离子4

2 个答案: