Question

我有一张桌子。单击一行后，我将加载有关该行的更多详细信息。同样，on-click表也消失了，取而代之的是带有详细信息的新div。我使用一个组件正确完成了此任务，但现在我想将所有内容分离为更多组件。一张是桌子，另一张是细节。我不想要再次调用该服务on click，因此我只需单击即可将我需要的参数从一个组件传递到另一个。这是我到目前为止尝试过的：

表格：

<table *ngIf="loading == false && openDetail == false">
        <thead>
          <th>
            Name
          </th>
          <th>
            Birth Year
          </th>
          <th>
            Actions
          </th>
        </thead>
        <tbody>
          <tr *ngFor="let item of list let i = index" [attr.data-index]="i" (openHeroDetailFromAbout) = "openDetailsFunction($event)">
          <!-- <tr *ngFor="let item of list let i = index" [attr.data-index]="i" (click) = "openHeroDetail(item)"> -->
            <td>
              <mat-form-field class="example-full-width" *ngIf="item.edit == true">
                <input matInput placeholder="Name" [(ngModel)]="item.name">
              </mat-form-field>
              <span *ngIf="item.edit == false || item.edit == undefined">
                  {{item.name}}
              </span>
            </td>
            <td>
              <mat-form-field class="example-full-width" *ngIf="item.edit == true">
                <input matInput placeholder="Year" [(ngModel)]="item.birth_year">
              </mat-form-field>
              <span *ngIf="item.edit == false || item.edit == undefined">
                  {{item.birth_year}}
              </span>
            </td>
            <td style="width: 160px">
              <div class="row">
                <div class="col-md-6">
                    <button type="button" class="mdc-icon-button material-icons" click-stop-propagation (click) = "confirmHero(item, $event)" *ngIf="item.edit == true">
                        <mat-icon>check</mat-icon>
                    </button>
                    <button type="button" class="mdc-icon-button material-icons" click-stop-propagation (click) = "editHero(item, $event)" *ngIf="item.edit == false || item.edit == undefined">
                        <mat-icon>edit</mat-icon>
                    </button>
                </div>
                <div class="col-md-6">
                    <button type="button" class="mdc-icon-button material-icons" click-stop-propagation (click) = "deleteHero(i, item, $event)">
                        <mat-icon>delete</mat-icon>
                    </button>
                  </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

然后在表格下方

<div *ngIf="openDetail == true">
   <app-hero-detail></app-hero-detail>
</div>

带有openHeroDetailFromAbout的第一个组件称为TableComponent，在那里我有这个组件：

openHeroDetailFromAbout(item: any): void {
    item.openDetail = true;
    console.log(item);
  }

第二个组件称为HeroDetailComponent：

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

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.scss']
})
export class HeroDetailComponent implements OnInit {
  @Input() heroName: string; // hero's name

  @Output() openDetails = new EventEmitter<any>();

  constructor() { }

  ngOnInit() {

  }

  openDetailsFunction(item: any): void {
    this.openDetails.emit(item);
    this.heroName = item.name;
    console.log(item);
  }

}

但是在该行上单击不会触发任何事情。我只是将item对象从组件传递到另一个组件，并在detail组件中显示该信息。另外console.log()无效

带有角组件和多个组件的表格详细信息

0 个答案: