Question

用户从下拉列表中选择导航项后，应使用文本框填充导航项的相应详细信息。

我有一个用于创建下拉列表的导航组件和一个用于填充文本框的导航详细信息组件。现在，我只想在navigation-detail组件中显示导航的属性之一。我正在使用一项服务，将从下拉列表中选择的导航传递给Navigation-detail组件。

在navigation-detail.component.ts的ngAfterViewInit方法中，我可以将导航项的任何属性登录到控制台。但是，当我在navigation-detail.component.html上尝试相同操作时，显示以下错误：

无法读取未定义的属性“ NavName”。

代码如下：

navigation.component.html

<mat-form-field>
  <mat-select placeholder="navigations" >
  <mat-option (click)="sendChangedNav(nav)" *ngFor="let nav of navigations" [value]="nav.Id">
    {{nav.NavName}}
  </mat-option>
</mat-select>
</mat-form-field>
<app-navigation-detail></app-navigation-detail>

navigation.component.ts

import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
import { NavigationService } from '../navigation.service';
import { INavigation } from '../INavigation';
import { ShareAppIDService } from '../share-app-id.service';
import { ShareNavigationService } from '../share-navigation.service';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements AfterViewInit {
  navigations: Array<INavigation>;

  constructor(private navigationService: NavigationService, private shareAppIdService: ShareAppIDService,
    private sharedNavService: ShareNavigationService) { }

  ngAfterViewInit() {
    this.shareAppIdService.appIdChanged.subscribe((appId) => {
      this.navigationService
        .getNavigations(appId)
        .subscribe(data => {this.navigations = data; });
        console.log(appId);
    });
  }

  sendChangedNav(nav) {
    this.sharedNavService.changeNavigation(nav);
  }
}

navigation-detail.component.html

{{navigation.NavName}}

navigation-detail.component.ts

import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import { ValueTransformer } from '@angular/compiler/src/util';
import { INavigation } from '../INavigation';
import { ShareNavigationService } from '../share-navigation.service';

@Component({
  selector: 'app-navigation-detail',
  templateUrl: './navigation-detail.component.html',
  styleUrls: ['./navigation-detail.component.css']
})
export class NavigationDetailComponent implements AfterViewInit {
  navigation: INavigation;

  constructor(private sharedNavService: ShareNavigationService) { }

  ngAfterViewInit() {
    this.sharedNavService.navigationChanged.subscribe((navigation) => {
      this.navigation = navigation;
      console.log('navigation detail id is: ' + navigation.NavPageURL);
    });
  }

}

shared-navigation.component.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class ShareNavigationService {

  constructor() { }

  private navigation = new Subject<INavigation>();
  public navigationChanged = this.navigation.asObservable();

  public changeNavigation(value) {
    this.navigation.next(value);
    console.log('navigation from changeNavigation service is ' + value);
  }
}

Answer 1

如Ashish所述，请使用安全的导航运算符来处理未定义的错误，

{{navigation?.NavName}}

与第二个问题 NgModel' since it isn't a known property of 'input' 有关您需要在 FormsModule 导入中添加 app.module.ts 。

选中此 answer 。

使用服务在组件之间共享数据

1 个答案: