Question

我有2个组件，一个孩子和一个父组件。

我的网页最初包含父组件的HTML，这是一个基本数据表。我想显示有关表中每一行数据的更多详细信息。因此，当我单击一行时，我想显示包含那些详细信息的子组件的模板！

app-match-monitor是子组件的选择器，我想要

<app-match-monitor [matchId]="matchId" [events]="eventsSubject.asObservable()">  
    <p>Hey there</p>
</app-match-monitor>

仅当我单击OnSelectedMatch(match.id)

时才显示在浏览器中

这是父组件的模板：

<div class="dashboard">
  <app-match-monitor [matchId]="matchId" [events]="eventsSubject.asObservable()">  
    <p>Hey there</p>
  </app-match-monitor>

  <div class="match_list_container">    
        <h2>List of matches</h2>
        <table class="match_list_table">
          <thead>
            <tr>
              <th>Id</th>
              <th >Time</th>
              <th>Home team</th>
              <th>Away team</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let match of matches" class="choose_match" (click)="OnSelectedMatch(match.id)">
              <td>{{(match.id)}}</td>
              <td>{{match.date_time}}</td>
              <td>{{match.home_team.short_name}}</td>
              <td>{{match.away_team.short_name}}</td>
            </tr>
          </tbody>
        </table>
  </div>
</div>

这是子组件：

@Component({
  selector: 'app-match-monitor',
  templateUrl: './match-monitor.component.html',
  styleUrls: ['./match-monitor.component.css'],
  providers: [MatchService, VideoInfoService, TeamsService]
})
export class MatchMonitorComponent implements OnInit {

  matchInfo = {};
  status;
  homeTeamJersey = {};
  awayTeamJersey = {};
  tvChannel;
  minimap;
  urlPreview;
  isUpdateMode = 0;

  @Input() colorKit;
  @Output() colorKitChange: EventEmitter<any> = new EventEmitter();

  @Input() matchId;
  @Input() events: Observable<void>;
  private eventsSubscription: any


  constructor(public matchService: MatchService, public teamsService: TeamsService, public videoInfoService: VideoInfoService, public sanitizer: DomSanitizer) { 
  }

  ngOnInit(){
    this.eventsSubscription = this.events.subscribe(id => {
      this.matchId = id;
      this.matchService.getMatchInfo(this.matchId).subscribe(match => {
        this.matchInfo = {'id':match.id, 'homeTeam':match['home_team']['name'], 'awayTeam':match['away_team']['name']};
        console.log(this.matchInfo);
        this.status = match['status'];
        this.homeTeamJersey = {'team_id':match['home_team']['id'], 'jerseyColor':match['home_team_kit']['jersey_color'], 'numberColor':match['home_team_kit']['number_color'], 'seasonKitList': []};
        this.awayTeamJersey = {'team_id':match['away_team']['id'], 'jerseyColor':match['away_team_kit']['jersey_color'], 'numberColor':match['away_team_kit']['number_color'], 'seasonKitList': []};
        this.urlPreview = this.sanitizer.bypassSecurityTrustResourceUrl(`/api/match/${this.matchId}/decoder_preview`);
        this.minimap = this.sanitizer.bypassSecurityTrustResourceUrl(`/app/match/${this.matchId}/embeddable`);
    })
    this.videoInfoService.getVideoAndMatchInfo(this.matchId).subscribe(res => {
      this.tvChannel = res['source']['name'];
    });
    })
  }


}

这是父组件的功能OnSelectedMatch(match.id)：

  private eventsSubject: Subject<void> = new Subject<void>();


  OnSelectedMatch(id) {
    this.matchId = id;
    this.eventsSubject.next(id)
    this.currentState = this.currentState === 'initial' ? 'final' : 'final';
  }

match-monitor.component.html：

<div class="match_details" *ngIf="isUpdateMode == 0">
        <div class="form-group row">
          <label class="col-sm-5 col-form-label">Tv channel</label>
          <div class="col-sm-5">
            <input name="Tvchannel" class="form-control" style=" margin-left: 31%; text-align: center;" type="text" value={{tvChannel}}/>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-7 col-form-label">{{matchInfo.homeTeam}}</label>
          <span class="color-box" [style.background-color]="homeTeamJersey.jerseyColor" [style.color]="homeTeamJersey.numberColor">Number</span>
        </div>
        <div class="form-group row">
          <label class="col-sm-7 col-form-label">{{matchInfo.awayTeam}}</label>
          <span class="color-box" [style.background-color]="awayTeamJersey.jerseyColor" [style.color]="awayTeamJersey.numberColor">Number</span>
        </div>
        <button class="btn btn-success" style="width: 100px; float: left;" (click)="onUpdateTeamColor()">Update</button>
    </div>

请问我如何进行这项工作的任何想法？

Answer 1

我们在{{1}中没有ng-show，所以我假设您将使用angular或*ngIf="matchId"

[hidden]="!matchId"也很臭，我不知道目的是什么，但通常我们没有这种东西

Angular组件中的数据绑定

1 个答案: