Holen Sie sich Daten Über die ID in Eckigen 2/4

Ich habe eine Liste mit Bestellungen und ich möchte eine weitere Komponente, die die details der jeweiligen Bestellung. Wie kann ich die details zu jeder Bestellung, indem man seine id? Ich brauche die Anzeige der material_purchase_orders, indem man die purchase_order.id. Durch klicken auf die viewDetail(), es navigiert mich auf die neue Komponente und zeigt die konkreten Bestellung detail

html

<div class="card-block" *ngFor="let order of orders">
      <h2 class="proj-name">{{ order.name }}</h2>
      <table>
        <thead>
          <tr>
            <th>Transaction Date</th>
            <th>Reference Number</th>
            <th>Grand Total</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let inner of order.purchase_orders">
            <td>{{ inner.transaction_date }}</td>
            <td>{{ inner.reference }}</td>
            <td> {{ inner.total }} ringgit </td>
            <td><button  type="submit" class = "btn btn-sm btn-primary" (click)="viewDetail(inner.id)"><i class="fa fa-angle-right" aria-hidden="true"></i>  View More Details</button></td>
          </tr>
        </tbody>
      </table>
  </div>

ts

getAllOrders(){
    this.subscription = this.purchaseOrderService.getAll()
        .subscribe(
          (data:any) => {
            this.orders = data.purchaseOrders;
            console.log(data);
          },
          error => {
           console.log(error);
          });
  }

  viewDetail(id){
    this.router.navigate(['orders', id]);
  }

service.ts

getAll() {
        if(!this.orders) {
                this.orders = this.httpClient.get<any>(this.url)
                                    .map((response => response))   
                                    .publishReplay(1)
                                    .refCount();  

            }
            return this.orders
      }
  • Was ist das Thema Ihrer vor hier? haben Sie zusätzliche routing-für detail-Ansicht?
  • Ja, ich habe das routing. Das problem ist, wie bekomme ich die Daten der einzelnen Bestellung? Wie kann ich mit der id?
  • dann können Sie die Nutzung des service zum übergeben von Daten an detail-Komponente und finde den Artikel von Id,
  • ah, dann können Sie den Benutzer-service zum senden von Daten zwischen den Komponenten
  • Können Sie mir helfen mit, dass?
InformationsquelleAutor Gray Singh | 2017-10-22
  1. 1

    Was Sie versuchen, zu erhalten, ist ein Element aus einer verschachtelten Arrays innerhalb eines Arrays. Ich sehe das gehandhabt werden kann in ein paar Möglichkeiten.

    • Könnte man speichern, die gewählt, um in einem service und Holen Sie es, wenn
      navigieren Sie zu der detail-Seite. Nachteil ist, dass die Daten nicht verfügbar
      auf der Seite aktualisieren.

    • Wenn Sie die Kontrolle über backend, könnten Sie tun,, so dass die ausgewählte Reihenfolge
      kann der Wert aus der db direkt basierend auf id. (Dies wäre mein
      Wahl)

    • Wenn Sie nicht die Kontrolle über das backend, sehe ich, dass Sie brauchen, um
      die Iteration der orders und dann die inner zu finden, um passende
      die so gewählte Reihenfolge.

    Also für die Letzte Möglichkeit, Ihr code sollte wie folgt Aussehen:

    getOrder(id) {
  return this.getAll()
    .map(data => {
      //iterate the top level
      for (let order of data.purchaseOrders) {
        //find the order
        let ord = order.purchase_orders.find(x => x.id === id)
        if(ord)
          return ord;
      }
    })
}

    und in Ihrem detail-Komponente, wie Dimithu, erhalten wir die parameter und rufen getOrder:

    constructor(private route: ActivatedRoute, 
            private purchaseOrderService: PurchaseOrderService) {}

ngOnInit(): void {
  this.route.paramMap
   .switchMap((params: ParamMap) => 
      this.purchaseOrderService.getOrder(+params.get('id')))
        .subscribe(order => this.order = order);
 }

    DEMO

    • Es sagt Daten.finden ist nicht eine Funktion. Ich denke, das ist alles meine Schuld. In meinem viewDetail(id), ich bin übergeben die id des purchase_orders. Aber in meinem api, ich kann nicht auf die id des purchase_orders seit purchaseOrders ist das Projekt. purchaseOrders stellt jedes Projekt und jedes Projekt hat purchase_orders und purchase_orders hat seine eigenen details
    • Ja, Recht Daten ist ein Objekt, das Recht, so sollte es vielleicht sein return data.purchase_orders.find(x => x.id === id) Recht, wenn ich das richtig verstehe. Versuchen Sie, dass 🙂
    • Ich habe es falsch mich nun mit der verschachtelten Objekts im Objekt. Aktualisiert meine Antwort mit der korrekten änderungen (glaube ich, haha), so ignorieren Sie meine vorherigen Kommentar und Blick auf Antwort 😉
    • Der Fehler ist jetzt Nicht Lesen der Eigenschaft 'abonnieren' undefined
    • Bitte debug-und Konsolen-log alle Antworten, die Sie bekommen, ich glaube ich hab die verschachtelten Objekte korrigieren, hmm?
    • Ich fügte hinzu, ein zweites Bild, oben 🙂
    • Könnten Sie fügen Sie die JSON-Sie bekommen an Stelle der Bilder, so dass ich Debuggen können, aber Sie sollten wirklich auch Debuggen, selbst-und Konsolen-melden Sie Ihre Antworten auf dem Weg zu sehen, wie deine Daten Aussehen 🙂
    • Ich denke, melden Sie es in den Dienst der "Daten.Bestellung"?
    • abonnieren Sie im Dienst, Sie können nicht alles zurückzugeben, was von abonnieren. Es sollte wie die demo, aber die bauen Ihre Daten-anders als in der demo, und Sie haben nur Bilder von Ihren Daten, fügen Sie die JSON-Antwort, und ich kann Debuggen mit Ihren Daten.
    • Ich habe es die JSON-gerade jetzt. Danke
    • Danke! 🙂 Jetzt erkenne ich, dass Sie an einer verschachtelten Arrays innerhalb eines Arrays, war ein versehen von mir. Ich würde tatsächlich überspringen die find ganz vielleicht und nur speichern Sie das gewählte Element in service und Holen Sie es von dort. Halten Sie auf, ich guck in den code 🙂
    • Aktualisiert meine Antwort mit demo 🙂
    • Vielen Dank für Ihre Zeit und Mühe. By the way, gibt es ein Nachteil für die Letzte option?
    • Naja, nee. Natürlich, wenn Sie maaaaaany Datensätze und es geschieht, um die Letzte sein, die es dauert eine Weile, um zu "finden" können. Aber sonst keine. Der große Vorteil der ersten option ist natürlich Sie über die url immer zur Verfügung, was ist natürlich, was würden Sie wahrscheinlich wollen 🙂
    • Wie bekomme ich "material": { "id": 1, "- sku": "938509", "name": "Gwapo", "created_at": "2017-10-20 09:23:47", "updated_at": "2017-10-20 09:23:47" } und in der HTML?
    • Sie müssen nur Durchlaufen Ihre Daten. In welchem Zusammenhang möchten Sie diese bekommen, ist es unklar, Sie wollen immer Holen diese (wenn vorhanden) oder Holen Sie Sie für eine bestimmte Bestellung?
    • Ja, es existiert. Wie möchte ich, um material.name? Dank
    • Hier die demo: stackblitz.com/edit/angular-eck15c?file=app/app.component.ts
    • Wenn funktioniert. aber wenn ich die Seite aktualisieren, es sagt, kann Nicht Lesen der Eigenschaft 'material_purchase_orders' undefined
    • Dies ist wahrscheinlich eine async-Problem, Satz *ngIf="order" auf die gesamte div oder dann order?.material_purchase_orders im template, wo die Bestellung ist der name der Variablen, die Sie benannt haben, in Ihrer detail-Seite. Check this: Winkel.io/guide/...
    • Sir, vielen Dank für Ihre Zeit und Mühe und sorry, wenn ich bin Sie stört :). Haben Sie einen großen Tag
    • Hah, kein problem, ich hatte Zeit zu helfen, heute, also warum nicht 😉 Dir einen schönen Tag auch, und happy coding!

    InformationsquelleAutor AJT82
  2. 2

    service.ts

    fügen Sie diese Methode zum service.ts-Datei

     getOrder(id: any) {
        this.orders = this.getAll();
        const selectedOrder = this.orders.find(order => order.id === id)
        return selectedOrder;
    }

    verwenden parameter Lesen in der Detailansicht, mit diesem 

    ngOnInit(): void {
this.route.params.forEach((params: Params) => {
  if (params['id'] !== undefined) {
    const id = +params['id'];
    this.navigated = true;
    this.purchaseOrderService.getOrder(id)
        .then(order => this.order = order);
  } else {
    this.navigated = false;
  }
});

    }

    für mehr details Lesen Sie bitte in dieses source code https://github.com/johnpapa/angular-tour-of-heroes/tree/master/src/app

    • Es sagt dies.Aufträge.finde keine Funktion
    • Bitte überprüfen Sie diese - dieses.Aufträge => dieser.Aufträge.finden(oder => oder.id === id)
    • getOrder(id: any) { dieses.Aufträge = diese.getAll(); const selectedOrder = diese.Aufträge.finden(um => um.id === id) return selectedOrder; }
    • könnten Sie bitte versuchen, diese, ich hoffe, Sie haben initialisieren Bestellungen parameter als array übergeben.
    • Er sagt immer noch das.Aufträge.finde keine Funktion
    • wenn die Daten innerhalb, dieser.Aufträge als array sollte es funktionieren, wir haben dieses stackoverflow.com/questions/43157794/...

    InformationsquelleAutor Dimuthu
Schreibe einen Kommentar