Question

我是角度2的新手，并开始学习这些概念。我有一个组件，当与我的控制器绑定时，它不显示数据。 Ui虽然加载了硬编码数据这是我的组件个人details.component.ts

import { Component, OnInit, Input} from '@angular/core';
import { PersonalDetails } from '../Shared/personal-details.type';
import { PersonalDetailsService } from '../services/personal-details.service';


@Component({
    selector: 'personal-details',
    templateUrl: './personal-details.component.html'
})
export class PersonalDetailsComponent implements OnInit {
    @Input() DetailsObtained: PersonalDetails;
    constructor(private personalDetailsService: PersonalDetailsService) {
        //this.DetailsObtained = {            
        //    Address : "from client",
        //    ContactNumber : "1112225436",
        //    EmailAddress:"client@gmail.com-client",
        //    Name : "sandeep"
        //}
    }
    ngOnInit(): void {
        this.personalDetailsService.getPersonalDetails().
            then(details => {
                this.DetailsObtained = details
            });

    }
}
Service
personal-details.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/Rx';

import {PersonalDetails} from '../Shared/personal-details.type';

@Injectable()

export class PersonalDetailsService {
    constructor(private http: Http) {

    }
    getPersonalDetails() {
        var personalDetails = this.http.get('api/PersonalDetails/GetPersonalDetails')
            .map(response => response.json() as PersonalDetails).toPromise();
        return this.http.get('api/PersonalDetails/GetPersonalDetails')
            .map(response => response.json() as PersonalDetails).toPromise();
    }
}

控制器： PersonalDetailsController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Skills.Entities;

// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace Skills.Controllers
{
    [Route("api/[controller]")] // api/PersonalDetails
    public class PersonalDetailsController : Controller
    {
        private static PersonalDetailsEntities _personalDetailsEntities = new PersonalDetailsEntities()
        {
            Name = "Sandeep Dutta- server",
            Address = "from  server",
            EmailAddress = "server@gmail.com",
            ContactNumber ="1112224356"
        };
        [HttpGet("[action]")]
        public IActionResult GetPersonalDetails()
        {
            return new ObjectResult(_personalDetailsEntities);
        }
    }
}

在调试时，我发现它要求的Name属性已经是响应的一部分。任何帮助将受到高度赞赏。下面提到的是chrome调试器的堆栈跟踪

错误类型错误：无法读取属性＆＃39;名称＆＃39;未定义的 at Object.eval [as updateRenderer]（PersonalDetailsComponent.html：12） at Object.debugUpdateRenderer [as updateRenderer]（vendor.js？v = RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I：sourcemap：24216）在checkAndUpdateView（vendor.js？v = RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I：sourcemap：23363）在callViewAction（vendor.js？v = RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I：sourcemap：23723）在execComponentViewsAction（vendor.js？v = RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I：sourcemap：23655）在checkAndUpdateView（vendor.js？v = RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I：sourcemap：23364）在callViewAction（vendor.js？v = RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I：sourcemap：23723） at execEmbeddedViewsAction（vendor.js？v = RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I：sourcemap：23681）在checkAndUpdateView（vendor.js？v = RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I：sourcemap：23359）在callViewAction（vendor.js？v = RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I：sourcemap：23723）

个人-details.component.html

 <div class="panel panel-default panel-primary">
  <div class="panel-heading">
        <h3>Some basic personal information!</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <p>Full Name:</p>
            </div>
            <div class="col-md-6">
                {{ DetailsObtained?.Name  }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <p>Address:</p>
            </div>
            <div class="col-md-6">
                {{ DetailsObtained?.Address   }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <p>EmailAddress:</p>
            </div>
            <div class="col-md-6">
                {{ DetailsObtained?.EmailAddress }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <p>ContactNumber:</p>
            </div>
            <div class="col-md-6">
                {{ DetailsObtained?.ContactNumber | formatPhoneNumber }}
            </div>
        </div>
    </div>
</div>

Answer 1

在你的html（PersonalDetailsComponent.html：12）中使用

 @Override
protected void onPreExecute() {
    textoSenha = (TextView) findViewById(R.id.mostrarSenha);
}

'？' - 表示DetailsObtained可以是未定义的（当你从服务器获取数据时，它未定义）

你不会有这个错误。

在渲染组件之前，最好使用组件解析器并从服务器获取所有数据

Answer 2

确定，所以经过一番努力，我可以弄清楚以下几点： 1.为了使用angular / typescript在UI上显示json输出，结果必须采用集合形式。 this.entity =结果不起作用。相反，this.entityCollection =结果为json（）可行 2.内部服务器错误是由于结果集的格式错误。在更正结果集的格式后，我能够在UI上看到数据

全部谢谢

UI未以角度2显示服务器数据

2 个答案: