【问题标题】:StaticInjectorError(AppModule)[NgForOf -> TemplateRef]StaticInjectorError(AppModule)[NgForOf -> TemplateRef]
【发布时间】:2019-10-25 13:44:34
【问题描述】:

我在 Angular7 中创建了一个 Directive,但是当我需要使用它时,它会显示这个错误:

错误:StaticInjectorError(AppModule)[NgForOf -> TemplateRef]: StaticInjectorError(平台:核心)[NgForOf -> TemplateRef]: NullInjectorError:没有 TemplateRef 的提供者! 错误:StaticInjectorError(AppModule)[NgForOf -> TemplateRef]: StaticInjectorError(Platform: core)[NgForOf -> TemplateRef]:

我在SharedModule 中创建了这个指令:

@NgModule({
  declarations: [FilderrorComponent, UploadfileComponent, ImageComponent, ValidatePermissionDirective],
  imports: [
    CommonModule
  ],
  exports: [ FilderrorComponent, UploadfileComponent, ImageComponent, ValidatePermissionDirective]
})
export class SharedModule {

    static forRoot(): ModuleWithProviders {
      return {
        ngModule: SharedModule,
        providers: [ FilderrorComponent, UploadfileComponent, ImageComponent , ValidatePermissionDirective]
      };
  }
}

这是我的指令:

@Directive({
  selector: '[appValidatePermission]'
})
export class ValidatePermissionDirective implements OnInit {

  show: boolean;
  constructor(private templateRef: TemplateRef<any>,
              private viewContainerRef: ViewContainerRef
    ,         private dynamic: DynamicPermissionService) { }

  // tslint:disable-next-line:no-input-rename
  @Input() AccessName: string;

  ngOnInit() {
    this.ValidatePemission();
    if (this.show) {
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainerRef.clear();
    }
  }
  ValidatePemission() {
    console.log('AccessName : ', this.AccessName);
    const find = this.dynamic.dynamicModel.find(x =>
      !! x.actionsVM.find(z => z.actionEnglishName === this.AccessName));
    console.log(find);
    if (find) {
        console.log(true);
        this.show = true;
      } else {
        console.log(false);
        this.show = false;
      }
  }
}

我在AdminModule : 中定义了shareModule

@NgModule({
  declarations: [],
  imports: [
    SharedModule,
    AdminpanelRoutingModule,

  ],
  providers: [Toolkit, { provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true }]
})
export class AdminpanelModule { }

我在 HTML 中使用Directive

<span [appValidatePermission]="CreateRole">
  <router-outlet></router-outlet>
</span>

什么问题???我该如何解决?

【问题讨论】:

  • &lt;span [appValidatePermission]="CreateRole"&gt; 更改为 &lt;span appValidatePermission="CreateRole"&gt; .. 删除模板中指令名称周围的 []..
  • @ManirajfromKarur 仍然显示该错误
  • 我不确定这与问题有关,但是在模板中使用指令时,您应该单独使用选择器名称,并且不应将其包含在 [ ] ..
  • 尝试添加CommonModule

标签: javascript angular typescript angular7 angular-directive


【解决方案1】:

我认为问题来自于 templateRef 为空的事实。 在使用它之前尝试初始化它可能

【讨论】:

  • 我怎样才能初始化它??
  • 你尝试过新的 TemplateRef() 吗?
  • 另外我刚刚看到this post 可以帮助您处理 TemplateRef。
  • TemplateRef 是抽象类。我不能初始化那个?
  • 好的,很抱歉。我链接的帖子对您​​有帮助吗?我还找到了this blog。希望对您有所帮助,不过我没有太多时间完整阅读,抱歉。
猜你喜欢
  • 2019-06-10
  • 1970-01-01
  • 2020-06-13
  • 2020-02-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-05-15
  • 1970-01-01
相关资源
最近更新 更多