相关疑难解决方法(0)

我的模板中有这个组件:

<vector-editor  #scaleControl
                [x]="scaleX"
                [y]="scaleY"
                [z]="scaleZ" >               
</vector-editor>

该vector-editor结构如下:

export class VerticeControlComponent implements OnInit
{
    @Input() x: number;
    @Input() y: number;
    @Input() z: number;

    ...
}

在我的应用程序中,我抓住了对#scaleControl使用的引用

@ViewChild('scaleControl') scaleControl: ElementRef;

现在,如果我输出scaleControl到控制台,我得到这个结果:

可以看出,引用不是null,并且我的组件的所有属性都在那里.我想访问这些属性,但在代码中实际的类型scaleControl是,ElementRef而不是VectorEditorControl在输出中看到.因此,我不允许使用TypeScript this.scaleControl.x.

我也试着ElementRef像这样投

var temp = <VectorEditorControl>this.scaleControl

但我得到一个错误,告诉我,我不能投ElementRef来VectorEditorControl

最后,我试图访问,this.scaleControl.nativeElement但它是未定义的...

我在这里错过了什么？

以下在Angular 4中运行良好

<ng-container *ngFor="let user of list_users">
  <div *ngIf="currentUser.username !== user.username">
    <div class="card">
      bla bla
    </div>
  </div>
</ng-container>

Angular 5抱怨这个错误:

Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
1. If 'ngOutletContext' 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. ("
        <!-- CUSTOM TEMPLATE -->
        <ng-template
            [ERROR ->][ngOutletContext]="{ item: model, index: index }"
            [ngTemplateOutlet]="template">
        "): ng:///TagInputModule/TagComponent.html@12:12
Property binding ngOutletContext …

如果使用带有then/else语法的模板,如何将ngFor循环中的当前变量传递给ngIf？

看起来它们在内联时使用时很好,但是无法从模板访问,例如:

<ul *ngFor="let number of numbers">
  <ng-container *ngIf="number % 2 == 0; then even_tpl; else odd_tpl"><>/ng-container>
</ul>


<ng-template #odd_tpl>
  <li>Odd: {{number}}</li>  
</ng-template>

<ng-template #even_tpl>
  <li>Even: {{number}}</li>  
</ng-template>

模板似乎根本没有访问权限number,但如果内联使用它可以工作.

以下链接中的工作版和非工作版的完整示例:plunkr

有没有办法动态设置* ngTemplateOutlet指令的值？

遵循这些原则：

<div *ngFor="let item of [ 'div', 'span' ]">
  <ng-container *ngTemplateOutlet="{{ item }}"></ng-container>
</div>

<ng-template #div>
  <div>some text inside a div</div>
</ng-template>

<ng-template #span>
  <span>some text inside a span</span>
</ng-template>

当然，它不起作用，但我想它很好地解释了我要实现的目标：如果该项是“ div”，则它应该显示#div模板，如果它是“ span” #span模板。