Question

我有一个包含项目列表的项目。我的想法是，当我选择一个项目并单击它时，应该在模态对话框窗口中打开它，并显示此项目的详细信息。

我实现了onSelected函数。此功能选择项目并在列表下显示，但不在对话框内。相反，当我的对话框打开时，它会显示空对话窗口，只有一个关闭按钮，没有任何内容。

我对Angular并不熟悉并请你帮助我。我已经失去了很多时间，并且不明白如何让它一起工作。

请参阅下面的代码段：

我有BikinisComponen

<app-bikini-list (bikiniSelected)="selectedBikini= $event"></app-bikini-list>
  <app-bikini-detail [selectedBikini]='selectedBikini'></app-bikini-detail>  
    export class BikinisComponent implements OnInit {
selectedBikini:Bikini;
   constructor( ) { }

  ngOnInit() {
  }    
}

下一个BikiniListComponent

<div class ="flex-header">
  <h1 class= 'page-title'> Bikini</h1>
 </div>

<div>
<ul class="flex-container">

<app-bikini-item *ngFor="let bikini of bikinis" [bikini]='bikini'
 class="flex-item" (click)="onSelected(bikini)"> </app-bikini-item>

</ul>
</div>
export class BikiniListComponent implements OnInit {
  bikinis: Bikini[] = [];

  @Output() bikiniSelected = new EventEmitter<Bikini>();

  constructor(private suitsService: SuitsService, public dialog: MdDialog, ) { }
  public result;

  public openDialog() {
    let dialogRef = this.dialog.open(BikiniDetailComponent);
    dialogRef.afterClosed();
  }
  ngOnInit() {
    this.bikinis = this.suitsService.getBikinis();
  }

  onSelected(bikini: Bikini) {
    this.bikiniSelected.emit(bikini);
  }

}

下一个比基尼项目

<md-card class="example-card">

  <img md-card-image src={{bikini.imagePath}}>
  <md-card-content>
    <h3>{{bikini.id}}   {{bikini.name}}</h3>
    <h4>Color: {{bikini.color}}</h4>
      <p  class='text-content'>{{bikini.description}}</p> 
  </md-card-content>

</md-card>
export class BikiniItemComponent {

@Input() bikini:Bikini;
bikiniId:number;
selectedBikini:Bikini;

  constructor(public dialog: MdDialog) {}
public result;

 public openDialog() {
    let dialogRef = this.dialog.open(BikiniDetailComponent);
    dialogRef.afterClosed();
  }


}

和比基尼细节

 <div md class="row">
  <div class="col-xs-12">
    <h1 md-dialog-title> {{selectedBikini?.name}}</h1>
    <h4>{{selectedBikini?.color}}</h4>
    <div md-dialog-content>
      <img src="{{selectedBikini?.imagePath}}" alt="" class="img-responsive">

      <p>{{selectedBikini?.description}}</p>
    </div>
    <div md-dialog-actions>
      <a md-fab (click)="dialogRef.close()"><i class="material-icons">close</i></a>
    </div>
  </div>
</div>

export class BikiniDetailComponent implements OnInit {
@Input() public selectedBikini:Bikini;

  constructor( public dialog: MdDialog) { }

  ngOnInit() {
  }

public result;

 public openDialog() {
    let dialogRef = this.dialog.open(BikiniDetailComponent);
    dialogRef.afterClosed();
  }
}

从我的服务调用的所有信息（工作正常）

Answer 1

据我所知，您希望将所选项目传递到对话框（BikiniDetailComponent）并在对话框中显示，因此您可以使用以下服务。

第1步 - 创建服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject'

import { Bikini } from 'path/to/bikini/model';


@Injectable()
export class SelectedBikiniEventService {
  private defaultBikini:Bikini = <Bikini> {} ;

  private editSelectedBikini:BehaviorSubject<Bikini> = new BehaviorSubject(this.defaultBikini);

  public editItem = this.editSelectedBikini
    .asObservable()
    .distinctUntilChanged();

  changeItem(bikini: Bikini) {
    this.editSelectedBikini.next(bikini);
  }

}

步骤 - 2不要在点击比基尼项目时发出事件，而是使用此服务方法并保存所选的比基尼项目。

在BikiniListComponent

中

constructor(private eventService: SelectedBikiniEventService) {}

单击该项时调用此方法

showSelectedItem(selecteBikini) {
   this.eventService.changeItem(selecteBikini);   
   // open the dialog here
}

步骤-3对话框Component（BikiniDetailComponent）如上所述注入服务并订阅服务数据的更改

constructor(private eventService: SelectedBikiniEventService) {
    this.eventService.editItem
      .subscribe( data => {
        this.bikini = data;
      });
}

带选定选项

1 个答案: