javascript - Angular 不渲染 HTML 中 app.component 的值

Question

你好吗？

我试图将从 app.component.ts 中的 http 获取的值渲染到 HTML，但它不起作用。 该值作为字符串显示在 console.log 上，但当我尝试将其与 this.date = dateObj 一起使用时，它返回未定义。

当我从 parseString() 内部访问它时，它不起作用，但在它之前，它起作用。请参阅日期 = '今天' 的示例。

HTML 呈现'today'，但不呈现dateObj 的值。 dateObj 的值是一个字符串，请记住。

HTML

<h2>{{date}}</h2>
<input type="submit" value="test" (click)="onClickMe()"/>

APP.COMPONENT.TS

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { parseString } from 'xml2js';


@Component({
    '...'
})

export class AppComponent implements OnInit {
  title = 'testing';
  date: string;

  constructor() {}
  ngOnInit(): void{}


    onClickMe(){

      ** removed for brevity. HTTP REQUEST code **

      //retrieve http to data
      this.http.post(url, body, {
        headers: new HttpHeaders()
        .set('Content-Type', 'text/xml') 
        .append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS') 
        .append('Access-Control-Allow-Origin', '*')
        .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method")
  , responseType:'text'}).subscribe(data => {
        // Read the result field from the response in XML and transform to JSON.
           var parser = new DOMParser();
           var xmlDoc = parser.parseFromString(data,"text/xml");
           //today appears in HTML
            this.date = 'today';

          parseString(data, function (err, result) {
           var stringified = JSON.stringify(result);
           console.log(stringified);
           let jsonObject = JSON.parse(stringified);
           let dateObj = jsonObject['date'];

           //dateObj works fine on console.log but doesn't appear in HTML when rendering with {{date}}
            this.date = dateObj;


          });

    },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          // A client-side or network error occurred. Handle it accordingly.
          console.log('An error occurred:', err.error.message);
        } else {
          // The backend returned an unsuccessful response code.
          // The response body may contain clues as to what went wrong,
          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
        }
      }
    );

  }




}

问题是，有办法做到这一点吗？我应该如何做才能在 HTML 中呈现该值？

Answer 1

将其指定为 this.date = dateObj; 而不是 date = dateObj;。

如果问题没有解决，请通过构造函数注入(inject) ChangeDetectorRef 并调用 detectChanges() 方法来触发更改检测。

import { ChangeDetectorRef } from '@angular/core';

constructor(private ref: ChangeDetectorRef){}

// call detectChanges() after this.date = dateObj;
this.date = dateObj;
this.ref.detectChanges();