Angular 2动态标签

Question

的index.html

else

app.component.ts

<project></project>

project.component.html

import {Component, OnInit, NgModule, HostListener, Inject, Pipe, PipeTransform, EventEmitter, Input} from '@angular/core';
import {Tabs} from './project/tabs';
import {Tab} from './project/tab';
import {FilterPipe} from './_directives/filter.pipe';
import {ProjectService} from './_services/project.service';

declare var Swiper: Object;

@Component({
  moduleId: module.id,
  selector: 'project',
  templateUrl: 'project/project.component.html'
})

export class ProjectComponent implements OnInit {
   images: string[];
   index: Int8Array;
   config: Object = {
      slidesPerView: 'auto',
      centeredSlides: true,
      spaceBetween: 200,
      effect: 'coverflow',
      speed: 1000,
      pagination: '.header-swiper-front .swiper-pagination',
      paginationClickable: true,
      nextButton: '.header-swiper-front .swiper-button-next',
      prevButton: '.header-swiper-front .swiper-button-prev',
      coverflow: {
      slideShadows: true
    },
    roundLengths: true,
    activeIndex: 1
};


   constructor(private projectService: ProjectService) {
      this.loadAllImage();
   }

   ngOnInit() {
   }

   private loadAllImage() {
       this.projectService.getAll().subscribe(image => {this.images = image})
   }

}

tabs.ts

<tabs (click)="$event.preventDefault()">
<tab tabTitle="Tab 2">Tab 2 Content</tab>  // <-- working
<tab [tabTitle]="'Tab 3'">Tab 3 Content</tab>  //  <-- working

    <tab *ngFor="let image of images | keys; let i = index" [attr.data-index]="i" tabTitle="{{image.key}}">  //<-- not working
        <div *ngFor="let projectData of image.value" >{{ projectData.name }}</div>
    </tab>  
</tabs>

tab.ts

import {Component, ContentChildren, QueryList, AfterContentInit} from '@angular/core';
import {Tab} from './tab';

@Component({
selector: 'tabs',
template: `
<ul class="nav nav-tabs">
  <li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">
    <a href="javascript:void(0);">{{tab.title}}</a>
  </li>
</ul>
<ng-content></ng-content>
`
})
export class Tabs implements AfterContentInit{
@ContentChildren(Tab) tabs: QueryList<Tab>;
// contentChildren are set
ngAfterContentInit() {
    // get all active tabs
    let activeTabs = this.tabs.filter((tab) => tab.active);

    // if there is no active tab set, activate the first
    if (activeTabs.length === 0) {
        this.selectTab(this.tabs.first);
    }
}
selectTab(tab: Tab) {
    // deactivate all tabs
    this.tabs.toArray().forEach(tab => tab.active = false);
    console.log(this.tabs)
    // activate the tab the user has clicked on.
    tab.active = true;
}
}

Project.service.tc

import {Component, Input} from '@angular/core';

@Component({
selector: 'tab',
styles: [`
.pane{
  padding: 1em;
}
`],
template: `
<div [hidden]="!active" class="pane">
  <ng-content></ng-content>
</div>
`
})
export class Tab {
  @Input('tabTitle') title: string;
  @Input() active = false;
}

后端网址的响应：

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions, Response} from '@angular/http';

@Injectable()

export class ProjectService {
    constructor(private http: Http) {}

    getAll() { 
        return this.http.get('http://localhost:8080/AngularTest/api/user.php')
        .map((response: Response) => response.json());
    }
}

当我在 tabs.ts 中的console.log（）时显示_result 2数组但是当我展开时它显示了5个数组元素，所以当页面加载时此时只加载2个数组元素我在html页面中声明为静态而另一个是动态的，所以这个动态元素不起作用。

请指导我需要改变什么？