Angular服务返回值，但未显示在页面中

Question

我正在从头开始学习Angular。 我创建了一个名为“ mylink”的组件，并为其创建了一个服务。

我试图使用'observable，of'和'subscribe'从服务返回一个字符串值。 该服务返回字符串，但是不会显示在网页中。 调试时，在组件中，它表明接收到的数据是“输入的意外结束”。 控制台中没有错误。 我该如何解决？ 提前致谢。

mylink.component.ts

import { Component, OnInit } from '@angular/core';
import { MylinkService } from '../mylink.service';
import { dashCaseToCamelCase } from '@angular/compiler/src/util';

@Component({
  selector: 'my-link',
  templateUrl: './mylink.component.html',
  styleUrls: ['./mylink.component.css']
})
export class MylinkComponent implements OnInit {
  myName: String;
  result: any;

  constructor(private mylinkService: MylinkService) { }

  ngOnInit() {
    this.getMylinkData();
  }

  getMylinkData(): void {
    this.mylinkService.getMylinkData()
    .subscribe(dataV => this.myName = dataV);
  }
}

mylink.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { catchError, map, tap } from 'rxjs/operators';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class MylinkService {

  private mylinkUrl = 'api/mylink';  // URL to web api

  constructor(private http: HttpClient) { }

  getMylinkData (): Observable<String> {
    var val = 'From service';
    return of(val);
  }
}

 <h2>My Link page</h2> <div> <label>My name is: <input #myName /> </label> </div> 

Answer 1

尝试这样：

<div>
  <label>My name is:
    <input [(ngModel)]="myName" name="myName" />
  </label>
</div>

Answer 2

我相信您想要做的是

   <label>My name is:
       {{myName}}
  </label>

在组件上，您将从服务返回的字符串分配给公共属性myName。 如果要在页面中显示它，只需插入此值即可，如我的示例所示