Angular2 - ngIf 从 Web 服务获取的字符串插值

# 使用 Angular 2 中的 *ngIf 在 Web 服务中获取字符串插值

typescript
// 导入Angular的HttpClient模块
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor(private http: HttpClient) {}
  // 从Web服务获取字符串的方法
  getStringFromService() {
    return this.http.get('https://api.example.com/getString');
  }
}

typescript
import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';
@Component({
  selector: 'app-my-component',
  template: `
    
      {{ stringValue }} 插值示例
    
    
      
Loading...
    
  `,
})
export class MyComponent implements OnInit {
  stringValue: string;
  constructor(private myService: MyService) {}
  ngOnInit() {
    // 在组件初始化时调用服务方法获取字符串
    this.myService.getStringFromService().subscribe(
      (data) => {
        // 成功获取字符串时，将其赋值给组件变量
        this.stringValue = data;
      },
      (error) => {
        console.error('Error fetching string from service', error);
      }
    );
  }
}