値を使用して関数を呼び出し、RESTNodejsからデータを取得するときの無限ループ

debugcn 投稿 Dev

ユージニオ

私はAngular2とNodejsの世界ではかなり新しいです。

現在、MySQLから情報を取得するNodeJを介してクエリを実行できるサービスを作成しました。

その情報については、そのIDに関連付けられた名前を表示できるようにする関数を呼び出すことができる値を使用したいと思います。

アイデアは、そのIDに関連付けられ、データベース内の別のテーブルでホストされている会社の名前を見つけることです。

テンプレートから呼び出しを行うと、REST APIに接続できますが、無限ループが開始され、ブラウザーのメモリがブロックされます。

この電話をかけてこの情報を入手する正しい方法は何でしょうか。

Customers.service.ts

export class customerService {
  private serviceUrl = 'http://localhost:3000/customers';
  constructor(private http: HttpClient) { }
  getCustomers(): Observable<CustomerList[]> {
    return this.http.get<CustomerList[]>(this.serviceUrl)
  }
  getCustomer(id): Observable<CustomerList[]> {
    return this.http.get<CustomerList[]>(this.serviceUrl+'/'+id)
  }
}

view-budget.component.ts

  getCustomerName(_id) {
    console.log('ID C:', _id);
    this.customerService.getCustomer(_id).subscribe(datos => {
      return this.getCustomer = datos;
    })
  }

view-budget.component.html

<ul>
  <li *ngFor="let budget of viewbudget" id="{{budget.id}}">
    <h2>{{ budget.date | date:'dd-MM-yyyy' }}</h2>
    <p *ngFor="let customer of getCustomerName()">{{(customer.name)}}</p>
    <p>Fecha Inicio: {{ budget.startdate | date:'dd-MM-yyyy' }}</p>
    <hr>
    <div class="price">$ {{budget.statusid}}</div>
  </li>
</ul>

モハメッドイリヤスNASR

フロントエンドから問題を解決することは確かに可能ですが、ここで達成しようとしていることは、バックエンドでSQL結合を使用することでより効率的に行われると思います。次に、会社名とともに必要なデータを別のAPIエンドポイントから視覚化できるようにします。

それができたら、サービスに新しいメソッドを追加し、コンポーネントから呼び出しngOnInit、結果をコンポーネントに保存し、次のように視覚化します。

<ul>
 <li *ngFor="let budget of viewbudget" id="{{budget.id}}">
    <h2>{{ budget.date | date:'dd-MM-yyyy' }}</h2>
    <p *ngFor="let customer of budget.customers">{{(customer.name)}}</p>
    <p>Fecha Inicio: {{ budget.startdate | date:'dd-MM-yyyy' }}</p>
    <hr>
    <div class="price">$ {{budget.statusid}}</div>
  </li>
</ul>

予算あたりの企業数が多い場合は、

または：

<ul>
 <li *ngFor="let budget of viewbudget" id="{{budget.id}}">
    <h2>{{ budget.date | date:'dd-MM-yyyy' }}</h2>
    <p>{{(budget.customer.name)}}</p>
    <p>Fecha Inicio: {{ budget.startdate | date:'dd-MM-yyyy' }}</p>
    <hr>
    <div class="price">$ {{budget.statusid}}</div>
  </li>
</ul>

会社が1つしかない場合（データモデルによって異なります）

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]