Question

这是我的角色服务：

@Injectable()
 export class ApiService {
  private get_msg_url: string = "http://localhost:3000/getmessages";
     constructor(private http:HttpClient) { }

     getMessage(): Observable<IPosts> {
      return this.http.post<IPosts>(this.get_msg_url,{"data":"data1"});
    }
   }

这是我的message.component.ts：

export class MessagesComponent implements OnInit {
     data = [];
     iposts: IPosts[];
     constructor(private apiSerivce: ApiService) {
     }
     getMessage(): void {
         this.apiSerivce.getMessage()
             .subscribe(data1 => this.data.push(data1));
     }
     ngOnInit(): void {
         this.getMessage();
         console.log(this.data);
     }
 }

这是我的帖子。

export interface IPosts {
    timestamp : number;
    message_content : string;
    message_link :string;
    tags : string[] ;
}

这是messsage.component.html：

<p>Json data {{data}} </p>

无论何时运行代码，我都可以在Chrome控制台中看到所需数据，但页面上没有显示数据。控制台上收到的数据格式为：

[]
    0: 
    message: Array(3)
        0: {timestamp: 1522072833748, 
        tags: Array(2), _id: "5aacb7cc0281b558debacf26", 
       message_link:"String"
    }}

Answer 1

问题是，您尝试打印数组而不是元素。

<p>Json data {{data}} </p>

将此更改为以下内容：

<p *ngFor="let element of data; index as i">
  Json data #{{i}}: {{element]]
</p>

Answer 2

我可以看到，数据是一个数组。您可以使用管道json显示数组的原始内容：{{data | json}}
但是我不想用你的html中显示的json做什么。

Answer 3

问题是你的输出数据是一个数组，而不是一个元素试试这样的事情，

<ul *ngFor="let element of data">
  <li>{{element}}</li>
</ul>

如何将从angular接收的数据传递给html前端？

3 个答案: