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

您声明了stock吗？您可能应该将响应的内容分配给stock，如下所示：

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

在您的模板中：

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

如果要格式化日期输出，可以使用管道：

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

好的，我想我现在看到了问题。您应该始终记住，在模板中，您只能访问在同一组件中声明的属性。应该是这样的：

Api服务

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() {
  return this.http.get(this.stockURL)
}

股票成分

@Component({
  selector: 'stocks',
  templateUrl: './stocks.component.html'
})
export class StocksComponent {
  stock = [];
  constructor(private api: ApiService) {

  }

  ngOnInit() {
    this.api.getBuySellData().subscribe(res => {
      this.stock = res;
    })
  }

  post(stock) {
    this.api.postStock(stock)
  }

stocks.component.html

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

Answer 2

尝试这种方式：首先，通过将结果分配给成员列表来编辑TypeScript逻辑。

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

然后，在模板中，确保使用 async 管道，以通知Angular由于可观察到的原因，您试图显示的数据以异步方式传入。

实现可能略有不同，我尚未对其进行测试，但是要记住的核心内容是，删除难看的 [object Object] 是 async 管道的用法

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

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

2 个答案: