Angular的新手我有几个问题，我有两个组件，父级是搜索结果，子级是特定结果的摘要/详细视图 . 我在从结果中获取数据以传递给摘要时遇到问题 . 公司名称显示在结果组件中，但摘要组件中不显示任何详细信息 . 我正在使用输入来尝试将公司数据传递到子组件 . 我已经看到人们做类似的事情，但直接在子组件上使用ngFor .

我遇到的另一个问题是只有最后一个按钮才能返回到结果视图 . 是否有更好的方法在显示结果或摘要之间切换而不是我拥有的事件和ngIfs？

这是我的代码 .

results.component.ts

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { CompanySummary } from '../company-summary/CompanySummary';

@Component({
    selector: 'search-results',
    templateUrl: './results.component.html'
})

export class SearchResultsComponent implements OnInit {
    constructor() {
        this.showResults = true;
        this.companySummarys = [];
}

ngOnInit(): void {
    this.showResults = true;
    //mock data
    this.companySummarys = [
        new CompanySummary(
            false,
          "12345",
          "Test Company 1",
          "123 Angular Avenue West",
          "Apt. 31415926",
          "Javascriptville",
          "CA",
            94115),
        new CompanySummary(
            false,
            "22222",
            "Test Company 3",
            "123 Angular Avenue West",
            "Apt. 31415926",
            "Javascriptville",
            "CA",
            94115),
        new CompanySummary(
            false,
            "33333",
            "Test Company 4",
            "123 Angular Avenue West",
            "Apt. 31415926",
            "Javascriptville",
            "CA",
            94115),
        new CompanySummary(
            false,
            "54321",
            "Test Company 2",
            "123 JQuery Blvd",
            "",
            "Javascriptville",
            "CA",
            94115)
    ]
}

companySummarys: Array<CompanySummary>;
showResults: boolean;

showCompanySummary(companySummary: CompanySummary): void {
    console.log('Entering showCompanySummary');
    this.showResults = false;
    companySummary.showSummary = true;
}

handleHideEvent(event): void {
    console.log('Entering handleHideEvent');
    this.showResults = true;
    } 
}

results.component.html

<md-list>
  <md-list-item *ngFor="let companyResult of companySummarys">
    <div *ngIf="showResults" (click)="showCompanySummary(companyResult)">
      {{companyResult.name}} : Click for details
    </div>
    <company-summary *ngIf="companyResult.showSummary" 
(hide)="handleHideEvent($event)" [companySummary]="companyResult"></company-summary>
  </md-list-item>  
</md-list>

公司summary.component.ts

import { Component, OnInit, EventEmitter, Input, Output, ElementRef } from '@angular/core';
import { CompanySummary } from './CompanySummary';

@Component({
    selector: 'company-summary',
    templateUrl: './company-summary.component.html'
})
export class CompanySummaryComponent{
    @Input() companySummary: CompanySummary;

    @Output() hide: EventEmitter<string> = new EventEmitter();

    //Event emitter to hide the Company Summary and let the Search Results know to show themselves.
    hideSummary(): void {
        console.log('emmiting hide summary event');
        this.companySummary.showSummary = false;        
        this.hide.emit(null);
    }
}

公司summary.component.html

<div class="search-summary">
  <h2>Summary</h2>
  <div><p>{{companySummary.Name}}</p></div>
  <div><p>{{companySummary.CompanyAddress1}}</p></div>
  <div><p>{{companySummary.CompanyAddress2}}</p></div>
  <div><p>{{companySummary.City}}</p></div>
  <div><p>{{companySummary.State}}</p></div>
  <div><p>{{companySummary.ZipCode}}</p></div>
  <button md-raised-button type="button" (click)="hideSummary()">Back</button>
</div>

CompanySummary.ts

export class CompanySummary {
    constructor(
        public showSummary: boolean,
        public id: string,
        public name: string,
        public streetAddress1: string,
        public streetAddress2: string,
        public city: string,
        public state: string,
        public zipCode: number) { }
}
angular ngfor