如何将从服务器接收的数据发布到客户端网站

Question

我从服务器接收以下数据到客户端，并存储在res变量中：

0: {date: "2014-12-02T00:00:00", close: 106.9064, buySell: "Sell"}
1: {date: "2014-12-03T00:00:00", close: 108.1188, buySell: "Sell"}
2: {date: "2014-12-04T00:00:00", close: 107.7084, buySell: "Sell"}

这是将上述内容打印到控制台窗口的角度代码：

  getBuySellData(){
     this.http.get(this.stockURL).subscribe(res => {
     console.log(res)
})

我想将这些数据打印到客户端屏幕上。这就是我现在正在尝试的：

 <mat-list >
      {{stock}}
 </mat-list>

这将在客户端网站上打印：

[object Object]

以下是这些组件：

export class ApiService {

constructor(private http: HttpClient) { }

stock: StockComponent
list: any[]
stockURL = 'https://localhost:44310/api/stock'

/** POST: */
postStock (stock) {
  this.http.post(this.stockURL, stock).subscribe(res => {
    console.log(res)
  })
}

getBuySellData() {
  this.http.get(this.stockURL).subscribe(res => {
    this.stock = res;
  })
}

股票构成部分

@Component({
selector: 'stocks',
templateUrl: './stocks.component.html' 
})
export class StocksComponent {
  stock = {}
constructor(private api: ApiService){

}

ngOnInit() {
  this.api.getBuySellData()
}

post(stock){
     this.api.postStock(stock)
}

股票成分

@Component({
selector: 'stock',
templateUrl: './stock.component.html' 
})
export class StockComponent {
 stock = {}
  constructor(private api: ApiService){
  }

ngOnInit() {
  this.api.getBuySellData()
}

post(stock){

    this.api.postStock(stock)
}

股票HTML

                <mat-list>
                    {{stock.date}}
                  </mat-list>
            <mat-list>
                <mat-list-item *ngFor="let item of stock">
                    {{item.date | date}}
                </mat-list-item>
             </mat-list>

Answer 1

尝试这样做:首先，通过将结果分配给成员列表来编辑TypeScript逻辑。

list: any[];
getBuySellData(){
     this.http.get(this.stockURL).subscribe(res => {
     this.list = res;
})

然后，在模板中，确保使用异步管道，以便通知角，由于使用了可观察到的原因，您试图显示的数据是异步的。

实现可能略有不同，我还没有对其进行测试，但是要记住的核心是，删除这个丑陋的对象是使用异步管道。

<mat-list>
   <mat-list-item *ngFor="let item of list">
    {{item | async}}
  </mat-list-item>
</mat-list>