Question

有一个下拉列表供用户选择，然后根据该选择选择该项目的详细信息。下拉列表位于名为function的组件中，详细信息位于名为function-detail的组件中。

我正在使用服务将选定的项（在本例中为功能）从功能组件传递到功能详细信息组件。

我注意到的是，第一次在下拉列表中选择该项目时，该项目及其属性未在function-detail中定义。但是，当在下拉列表中选择另一个项目时，该项目及其属性将在function-detail中定义。

我不确定为什么会这样。

代码如下：

function.component.html

<mat-form-field>
  <mat-select placeholder="functions">
    <mat-option (click)="sendChangedFunction(func)"  *ngFor="let func of functions" [value]="func.Id">
      {{func.FunctionDescription}}
    </mat-option>
  </mat-select>
</mat-form-field>
<div ></div>
<app-function-detail *ngIf="loadFunctionDetail"></app-function-detail>

function.component.ts

import { Component, OnInit } from '@angular/core';
import { ShareAppIDService } from '../share-app-id.service';
import { FunctionService } from '../function.service';
import { FunctionWH } from '../function';
import { SharedFunctionService } from '../shared-function.service';

@Component({
  selector: 'app-function',
  templateUrl: './function.component.html',
  styleUrls: ['./function.component.css']
})
export class FunctionComponent implements OnInit {
  functions: Array<FunctionWH>;
  appId: number;

  constructor(private sharedAppIdService: ShareAppIDService,
    private functionService: FunctionService,
    private sharedFunctionService: SharedFunctionService) { }
    private loadFunctionDetail: boolean;

  ngOnInit() {
    this.sharedAppIdService.appIdChanged.subscribe((appId: number) => {
      this.appId = appId;

      this.functionService
        .getFunctions(appId)
        .subscribe(data => { this.functions = data; });
    });
  }

  sendChangedFunction(func) {
    this.loadFunctionDetail = true;
    this.sharedFunctionService.changeFunction(func);
  }

}

shared-function.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { FunctionWH } from './function';

@Injectable({
  providedIn: 'root'
})
export class SharedFunctionService {
  private functionwh = new Subject<FunctionWH>();
  public functionChanged = this.functionwh.asObservable();

  constructor() { }

  public changeFunction(value) {
    this.functionwh.next(value);
    console.log('function from changeFunction service is ' + value);
  }
}

function-detail.component.ts

import { Component,  AfterViewInit } from '@angular/core';
import { FunctionWH } from '../function';
import { SharedFunctionService } from '../shared-function.service';

@Component({
  selector: 'app-function-detail',
  templateUrl: './function-detail.component.html',
  styleUrls: ['./function-detail.component.css']
})
export class FunctionDetailComponent implements AfterViewInit {
  private functionwh: FunctionWH;

  constructor(private sharedFunctionService: SharedFunctionService) { }


  ngAfterViewInit() {
    this.sharedFunctionService.functionChanged.subscribe((data) => {
      console.log("above function assign is");
      this.functionwh = data;
      console.log("function app id is: " + this.functionwh.AppId);
    });
  }
}

Answer 1

1）尝试替换单击以更改事件

<mat-option (change)="sendChangedFunction(func)"  *ngFor="let func of functions" [value]="func.Id">
      {{func.FunctionDescription}}
</mat-option>

2）另外尝试将ngAfterViewInit替换为ngAfterViewChecked

尝试上述任一方法或同时尝试两者。让我们看看它是否有效。

Answer 2

我将service和function.component.ts更改为下面的内容，现在它在function.component.ts中的subscription方法中显示了控制台日志。我不确定原始代码和所做的更改有什么区别。

shared-function.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { FunctionWH } from './function';

@Injectable({
  providedIn: 'root'
})
export class SharedFunctionService {
  private functionwh = new Subject<FunctionWH>();
  public functionChanged = this.functionwh.asObservable();
  private showFunctionDetail = new Subject<boolean>();

  constructor() { }

  public changeFunction(value) {
    this.functionwh.next(value);
    console.log('function from changeFunction service is ' + value);
  }

  public updateNavigationDetail(value) {
    this.showFunctionDetail.next(value);
  }
}

function-detail.component.ts

import { Component,   AfterViewInit } from '@angular/core';
import { FunctionWH } from '../function';
import { SharedFunctionService } from '../shared-function.service';

@Component({
  selector: 'app-function-detail',
  templateUrl: './function-detail.component.html',
  styleUrls: ['./function-detail.component.css']
})
export class FunctionDetailComponent implements AfterViewInit  {
  private functionwh: FunctionWH;
  private showFunctionDetail: boolean;

  constructor(private sharedFunctionService: SharedFunctionService) { }


  ngAfterViewInit() {
    this.sharedFunctionService.functionChanged.subscribe((data) => {
      console.log("above function assign is");
      this.functionwh = data;
      console.log("function app id is: " + this.functionwh.AppId);
      console.log("function code is: " + this.functionwh.FunctionCode);
      this.showFunctionDetail = true;
    });
  }
}

订阅值未显示

2 个答案: