角度サービスは値を返しますが、ページに表示されません

Question

私は最初から角度を学んでいます。私は 'mylink'という名前のコンポーネントとそのサービスを作成しました。

「observable、of」と「subscribe」を使用して、サービスから文字列値を返そうとしました。サービスは文字列を返しますが、Webページには表示されません。デバッグ中、コンポーネントでは、受信したデータが "予期しない入力の終了"であることが示されます。コンソールにエラーはありません。これをどうすれば解決できますか？前もって感謝します。

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

あなたが何をしようとしてlieveすることは、公共の財産がmyNameにサービスから返された文字列を代入しているコンポーネントに

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

のようなものです。あなたは私の例に示すように、あなたはこの値を補間する必要があるページに表示したい場合は