Angular：頁面重新加載時數據消失

Question

我有一個 html 模板

公司列表.component.html

<br/>
<div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-6">
            <div class="card">
            <div class="card-header">
                <i class="fa fa-align-justify">Employee List</i> 
            </div>
            <div class="card-body">
                    <table class="table" >
                    <thead font-size="2px" align="center">
                        <tr>
                            <th>Id</th>
                            <th>Company </th>           
                            <th>product</th>        
                            <th>Quantity</th> 
                            <th>Price</th>                 
                        </tr>
                    </thead>
                    <tbody>
                        <tr align="center" *ngFor="let data of datas" >                            
                            <td>{{data.cmpid}}</td>  
                            <td>{{data.cmpname}}</td> 
                            <td>{{data.cmpproduct}}</td>
                            <td>{{data.cmpqty}}</td>
                            <td>{{data.cmpprice}}</td>     
                        </tr>
                    </tbody>
                    </table>
                </div>
            </div>
        </div> 
    </div>
</div>

單擊按鈕時調用的方法

公司列表.component.ts

public getCompanylist(){

   console.log("getCompanyList() called");
  this.datas=this.newservice.getcompanylist();
    console.log(this.datas);  
    console.log("getcomapnylist() in companylistcomponent.ts Called da");
    return this.datas;
  };

在頁面加載時也會調​​用相同的方法

公司列表.component.ts

ngOnInit() {

    console.log("NG oninit called.")
    this.getCompanylist();

  }

getCompanylist() 反過來調用服務中的方法

myservice.ts

getcompanylist() {

  alert("service method called");   

  this.http.get("http://localhost:8080/tabletolist").subscribe((data)=>{this.datas=data});
return this.datas;
}

當我單擊按鈕時， getCompanyList()方法會按預期使用從 springboot 服務器返回的數組更新datas字段，但在頁面加載時，即使調用了相同的方法，即getCompanylist()它將datas字段設置為未定義，而不是從服務器返回的數據。 更奇怪的是，當組件使用路由器從另一個組件加載時，它按預期工作，但在加載相同的頁面 url 時，即使調用了方法，它也會將數據字段設置為未定義。 有人請幫我弄清楚這個問題。

Answer 1

您可以在服務中使用 data 變量而不是返回它。

（看起來該函數可以在以原始方式完成訂閱調用之前返回）。

例如：

myservice.ts

getcompanylist() {

  this.http.get("http://localhost:8080/tabletolist").subscribe((data)=>{
{
this.datas=data
}
);
}

公司列表.component.ts：

ngOnInit(){
this.newservice.getcompanylist();
  };

公司列表.component.html

<tr align="center" *ngFor="let data of newservice.datas" > 
...
</tr>

Answer 2

不推薦您的編碼實踐，必須改進。

試試這個方法：

1-Service 應該用於服務/api 調用和數據流。

2-服務調用訂閱應該在需要服務的地方處理，主要是組件而不是服務組件本身。

你的代碼應該是：

myservice.ts

getCompanyList() {
  const url = "http://localhost:8080/tabletolist";
  return this.http.get(url);
}

公司列表.component.ts

聲明任何空數組屬性，即數據

public datas = [];

在組件的構造函數中初始化您的服務(private myService: myservice)

getCompanyList(){
   this.myService.getCompanyList().subscribe(res => {
          this.datas = res
      });
}

組件初始化時調用 getCompanyList 方法

ngOnInit() {
    this.getCompanyList();
}

Answer 3

myservice.ts

getcompanylist() {

  alert("service method called");   

  this.http.get("http://localhost:8080/tabletolist").subscribe((data)=> data);
}

像這樣嘗試

公司列表.component.ts

ngOnInit() {

    console.log("NG oninit called.")
   this.newservice.getcompanylist().then((data) => { this.datas = data});

  }