Question

这是我的详细视图组件

import {Component,Input,Output,EventEmitter,OnInit} from "@angular/core";
import { Router, ActivatedRoute, Params } from '@angular/router';

import {TypeService} from './type.service'

import { PropertyTypes } from './type';

@Component({
    selector:'property-type-view',
    template:`
        <div class="panel panel-default">
            <div class="panel-heading">
                <a [routerLink]="['../']" 
                    class="btn btn-success">
                   <i class="fa fa-list" aria-hidden="true"></i>
                </a>
                <span class="title">

                </span>
            </div>
            <div class="panel-body">
                <div class="row">
                    {{(PropType | json).name}}
                </div>
            </div>
        </div>
    `,
    styles:[`
        .panel-default>.panel-heading>.title
        {
            color: #663663;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 250%;
        }
        .panel-default>.panel-heading>.btn
        {
            position: relative;
            top: -5px;
            margin-left:5px;
        }

    `]
})

export class TypeViewComponent implements OnInit{

    constructor(
    private route: ActivatedRoute,
    private router: Router,
    private service: TypeService) {}

    errorMessage: string;

    private PropType: PropertyTypes[];

    ngOnInit()
    { 
        // (+) converts string 'id' to a number
        let id = +this.route.snapshot.params['id'];
        this.service.getPropType(id).subscribe(
                        PropType => this.PropType = PropType,
                        error =>  this.errorMessage = <any>error  
                     );
    }
}

如果我尝试在没有管道过滤器的情况下返回整个对象{{PropType.name}}我会得到同样的错误，这是我的服务方法

  getPropType(id:number):Observable <PropertyTypes[]>   {
    return this.http.get(this.TypeUrl+'/'+id)
                    .map(res=>res.json())
                    .catch(this.ThrowError);   }

想要实现的目的是能够使用{{PropType.name}}打印属性类型详细信息而不会崩溃应用程序错误我已经尝试过使用安全操作符的异步管道{{(PropType | async)?.name}}仍然没有运气任何想法？

Answer 1

您是否尝试在*ngIf="PropType"的父级使用{{(PropType | json).name}}？因为当html不渲染你的属性时。

无法读取未定义角度2的属性

1 个答案: