首页 > 解决方案 > Angular 绑定 web api 格式

问题描述

从我的 web api 中,我可以看到换行符等的格式,如下所示:

address: "11 Ingle Park Way↵LONDON↵NN15 1GN↵United Kingdom"

我想知道的是,如何使用这种格式将数据绑定到我的视图。到目前为止,我正在做:

<span class="text-gray">{{receivedRequest.address}}</span>

TS文件

receivedRequest: any;

constructor(private service: nowService,
    private appComponent: AppComponent,
    private userService: UserService,
    private router: Router,
    private http: HttpClient,
    private route: ActivatedRoute
  ) {
    this.receivedRequest = { number: '', opened_at: '', description: '', short_description: '', "c_i.serial_number" : "value" }; this.receivedLocation = { city: null, country: null }
  }

private getRequest() {
    this.service.getServiceRequest(this.s_id, this.c_id).subscribe((data) => {
      this.loading = true;
      console.log('Result - ', data);
      console.log('service data is received');
      this.loading = true;
      this.receivedRequest = data.result;
      this.loading = false;
    })
  }

.service 文件

getServiceRequest(s_id, cId): Observable<any> {
    return this.http.get<any>(this.servicenowApiUrl + "/" + s_id + "?c_id=" + cId)
      .pipe(
        catchError(this.handleError)
      );
  }

标签: htmlangular

解决方案


正如你可以在这里阅读

HTML pre元素表示要完全按照 HTML 文件中所写的方式呈现的预格式化文本。文本通常使用非比例(“等宽”)字体呈现。此元素内的空格显示为已写入。

如下所示,您可以将span标签替换为pre标签

<pre class="text-gray">{{receivedRequest.address}}</pre>

并保留文本的现有格式而不修改您的 api 端点。

一切顺利


推荐阅读