Question

我是角色的新手..鉴于下面是我正在编写的测试代码.. 简介：我的问题是我没有将值返回到对象中，尽管我能够在日志中看到它。细节：我使用Angular4，下面给出的是我的组件代码，服务和HTML代码，我的意图是，当我点击提交按钮时，订阅者将使用“this.pythTicker”作为REST API服务的parm来调用服务，该服务将“this.pythTicker”的一些值返回到属性retPythService。返回的值将正确打印在日志中，但不会分配给this.retPythService。所以我的问题是，我是否在人群中做错了.retPythService？我有的困惑是，打印到上面的日志工作，但订阅this.companyRet.compname不起作用我最终的计划是使用属性“retPythService”来填充HTML的第二行（this.companyRet.compname）。

HTML ##### pythsearch.component.html

<form (submit)="onPythSubmit()">
  <div class="form-group">
    <label>Name</label>
restApiSearch-Ticker: <input type="text" [(ngModel)]="pythTicker" name="Ticker"> <input type="submit">
  </div>
</form>
<h3> ticker details from a Pyth RESTAPI  {{ this.companyRet.compname }} </h3>

COMPONENT ####### pythsearch.component.ts

import { PythSrchService } from '../../services/PythSrchService.service';
    @NgModule({
      declarations: [
        PythsearchComponent
        ],
      imports: [BrowserModule, FormsModule],
      providers: [ PythsearchComponent ],
      bootstrap: [ PythsearchComponent ],
     })


export class PythsearchComponent implements OnInit {
  pythTicker: any;
  companyRet = {
  bond : '',
  compname : '',
  convexity : '',
  price : '',
  };
  retPythService: any[];
  errMsg: string;
  constructor( public PythSrchInst: PythSrchService ) {      }
  ngOnInit() { this.retPythService = '';}

  onPythSubmit() {
    console.log ('hit onsubmit', this.pythTicker);

  // try 1 WORKS !!!!, Im passing pythticker and subscribing to the REST API service 
    this.PythSrchInst.getTickerDetails(this.pythTicker).subscribe(
    retPythService =>  console.log('retpthlog', retPythService) );

    // try 2 does not work, trying to move it to another object this.retPythService
    this.PythSrchInst.getTickerDetails(this.pythTicker).subscribe(
      retPythService =>  {this.retPythService = retPythService ; } );

// the below statements return empty values in LOG
    console.log('thisretpythservice in component :' , this.retPythService);
    console.log('compantret.compname:' , this.companyRet );

      }
}

获取RESTAPI数据的服务

export class PythSrchService {
  PythApi= 'http://127.0.0.1:5002/PythSearch';
  retPythService: any;
  constructor( public http: Http )  {}
   getTickerDetails(PassTicker)  {
     this.retPythService = `${this.PythApi}\/${PassTicker} `;
     console.log('api call:', this.retPythService);
     // console.log( 'service call:' , this.http.get(this.retPythService).map(res => res.json()));
     return this.http.get(this.retPythService).map(res => res.json());
   }

LOG OUTPUT

   api call: http://127.0.0.1:5002/PythSearch/TSLA 
    thisretpythservice in component : undefined
    compantret.compname:                   -->>> empty
    Object { bond: "", compname: "", convexity: "", price: "" } -->> empty
    retpthlog 
    Object { bond: "Testla Motor corp 10 year bond", compname: "tesla motor corp", convexity: "0.52", price: "102" } >>> Not empty , why?

Answer 1

如果其他任何新手遇到同样的琐碎问题，请发布答案谢谢，到目前为止，我错过了订阅和可观察的概念..现在我很清楚。以下修复工作..

// try 2 works now

this.PythSrchInst.getTickerDetails(this.pythTicker).subscribe(
  retPythService =>  {
    this.retPythService = retPythService ;
   // This was the problem
    this.companyRet = this.retPythService; 
    console.log('thisretpythservice in component :' , this.retPythService);
  });

Angular 4 observable在日志中订阅打印值，但不传递给另一个属性

1 个答案: