小编Moh*_*een的帖子

我有一个函数,我需要调用每个元素,将产生2个新的输出.例如

list = [{a : 1, b: 2}, {a:3, b: 4}]

我的HTML会

<div *ngFor="#item of list">{{item.c}}, {{item.d}}</div>

如果你注意到,我正在显示c和d.那些在原始列表中不存在,但我想调用一个函数并计算它们以便我可以显示它们.我不想两次调用该函数.d = a + b + c的值.这意味着它取决于c

我需要我的模板是这样的

<div *ngFor="#item of list; #newItem=calculate(item)">{{newItem.c}}, {{newItem.d}}</div>

我知道我不能使用局部变量,但你能想到另一种解决方案吗？

实例:

(a)是项目价格(b)是运费(c)是根据(a)计算的销售税(d)是最终价格= a + b + c

我想要显示:

Price: {{a}}
Taxes: {{c}}
Shipping {{b}}
Final Price: {{d}}

我有3个组件.1个父组件,可以包含ng-content中任意2个子组件之一.我的子组件具有共享功能,因此它们扩展了具有共享功能的抽象类.

当我尝试使用ContentChildren获取ng-content引用时,如果我使用其中一个子类,它可以正常工作.当我引用抽象类时,它不起作用.有没有办法让这项工作？plkr是:http://plnkr.co/edit/f3vc2t2gjtOrusfeesHa？p =preview

这是我的代码:

儿童抽象课:

    abstract export class Child{
      value: any;
      abstract setValue();
    }    

我的父代码:

@Component({
  selector: 'parent',
  template: `
    <div>
      parent
      <ng-content></ng-content>
    </div>
  `,
})
export class Parent {
  @ContentChild(Child) 
  child: Child;
  name:string;
  constructor() {

  }
   ngAfterViewInit() {
     this.child.setValue();
   }
}

第一个孩子:

@Component({
  selector: 'child1',
  template: `
    <div>
       value is: {{value}}
    </div>
  `,
})
export class Child1 extends Child {
  name:string;
  constructor() {

  }
   setValue() {this.value = 'Value from child 1'}
}

第二个孩子:

@Component({
  selector: 'child2',
  template: …

由于角度2没有配备完整的丰富组件,我决定在角度2内使用自举.我知道这不是最好的主意,因为它打破了虚拟圆顶问题,但我没有其他解决方案.我遇到的问题是角度2组件不会在popover html中呈现.有人有解决方案吗？

我正在看Renderer类,它似乎是我的解决方案,但我无法让它工作.这是一些代码:

• 我的父组件持有popover

  ngAfterViewInit() {
  // viewChild is updated after the view has been initialized
  
      var elements = jQuery(this.elementRef.nativeElement).find('[data-toggle="popover"]');
      jQuery.each(elements, jQuery.proxy(function(index, element){
              var eventId = jQuery(element).prop('id');
              jQuery(element).popover({ html : true,
                                                  placement: 'top',
                                                  container: 'body',
                                                  content: this.getEventContent(eventId) }); 
      }, this));     
  }
  getEventContent(eventId){
      var selectedEvent = this.getEvent(eventId);
      var button = jQuery('<button type="button" class="btn register"></button>');
  
      var angularViewHolder= jQuery('<div></div>');
  
      this.renderer.createElement(angularViewHolder[0], 'event-view')
      button.attr('id', eventId);
      return selectedEvent.description + '<br />' + 
          button[0].outerHTML + angularViewHolder[0].outerHTML;  
  }
  

  Run Code Online (Sandbox Code Playgroud)

我需要在popover中呈现的事件视图组件

import {Component, View} from 'angular2/core';
@Component({
    selector: 'event-view',
    template: …