не показыватьпри использовании директивы структуры - PullRequest
Новая
       16

не показыватьпри использовании директивы структуры

0 голосов
/ 21 декабря 2018

Я создаю эту директиву для шоу или ярлыка hidde.

   Directive({
  selector: '[appUser]'
})
export class UserDirective {

  RoleId:Subscription | null=null;
  op:boolean;
  _roleId:number;
  opo:ValidateUR;

  constructor(private optService:OptionsService
    ,private logserve:LoginService,
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef) { 
     this.opo=this.optService.initialValidateUR();
      this.RoleId=this.logserve._roleId$.subscribe((rId)=>{
      this._roleId=rId;
    })
  }

  @Input('appUser') set ngRoleValidate(oId:number)
  {
    this.opo.optionId=oId;
    this.optService.ValidateUser(this.opo).subscribe((rid)=>{

      if(rid==true)
      {
        console.log('in true')
          this.viewContainerRef.createEmbeddedView(this.templateRef);
      }else{
          this.viewContainerRef.clear();
      }
    })
  }
}

и это HTML-код: 

   <li *ngFor="let op of optionList">
        <ng-template *appUser="op.id">
              <!-- <fa-icon [icon]="op.icon"></fa-icon>  -->
              <label  (click)='this[op.routeFunctionName]()'>{{op.optionName}}</label>
        </ng-template>
    </li>

Теперь мне нужно, когда rid истинно, показывает метку, а когда ложно, скрывает метку, но когда ridправда это не показывать мне ярлык.в чем проблема?

1 Ответ

0 голосов
/ 21 декабря 2018

Часть шаблона: 

<ng-template *appUser="op.id">

расширена до: 

<ng-template [appUser]="op.id">
  <ng-template>

Ваша директива отображает все, что находится внутри <ng-template [appUser]="op.id">.И мы можем видеть, что он обернут в другой ng-template, который не может быть визуализирован без создания встроенного представления.

Для правильной визуализации я бы использовал ng-container вместо ng-template: 

<ng-container *appUser="op.id">
  <!-- <fa-icon [icon]="op.icon"></fa-icon>  -->
  <label  (click)='this[op.routeFunctionName]()'>{{op.optionName}}</label>
</ng-container>

Другой способ - использование расширенной версии: 

<ng-template [appUser]="op.id">
  <!-- <fa-icon [icon]="op.icon"></fa-icon>  -->
  <label  (click)='this[op.routeFunctionName]()'>{{op.optionName}}</label>
</ng-template>
...