Angular2 Warten HttpPost-Antwort

Ich habe eine angular2 app im Typoskript. Ich mache eine HTTP Post-Anforderung, um einen Eintrag erstellen. Diese post-request passiert, feinen und der Datensatz gespeichert wird, jedoch habe ich wieder die neue Platte aus dem service und ich möchte hinzufügen, dass es eine Liste in meine Komponente und aktualisieren Sie den DOM mit dem neu erstellten Datensatz. Jedoch, es scheint nie zu zurück in der Zeit, ist es eine anerkannte Methode für die Verarbeitung halt, bis es wieder oder erkennen Veränderungen in meinem array und dann aktualisieren Sie die DOM?

Mein service-Methode ist wie folgt:

public AddComment = (comment: RepackComment): Observable<RepackComment> => {
    var json = JSON.stringify({ comment : comment.Comment, rr_id : comment.RepackId, comment_by : comment.CommentBy });
    return this.http.post(this.commentUrl + 'Add', json, {headers: this.headers})
                    .map((response: Response) => <RepackComment>response.json())
                    .catch(this.handleError);
}

- Und das ist meine Komponente Methode:

saveComment(): void{
    console.log(this.newComment);
    this.repackService.AddComment(this.newComment)
                    .subscribe((data: RepackComment) => this.addedComment = data,
                    error => console.log(error),
                    () => console.log('Finished creating new comment'));

    console.log("added Comment: " + this.addedComment);
    this.comments.push(this.addedComment);
    this.addNewComment = false;
}

So, wenn this.addedComment aufgefüllt wurde mit der return-Wert, möchte ich hinzufügen, dass es um die this.comments array. ich habe dann ein flag setzen, genannt this.addNewComment welche schaltet zwischen der Eingabe-und Anzeige-Felder auf dem front-end zur Anzeige der Daten.

Vielen Dank im vorraus!!!!!!

BEARBEITEN

Wie gewünscht ist hier der entsprechende Teil meiner Vorlage für diese Kommentare. ich benutze PrimeNG für meine Komponenten:

<p-dataList [value]="comments" [hidden]="addNewComment">
       <header style="height:30px;">
            <button pButton type="button" label="Add Comment" (click)="addComment()" class="actionBtn" style="float:left;width:150px;"></button>
            <span style="margin-left:-105px;font-size:20px;">Comments</span>
       </header>
       <template let-comment>
            <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5;" >
                 <div class="ui-grid-row">
                      <div class="ui-grid-col-12">
                           <div class="ui-grid ui-grid-responsive ui-fluid comment">
                                <div class="ui-grid-row row-div">
                                   <div class="ui-grid-col-3 labelFor">ID: </div>
                                   <div class="ui-grid-col-7 displayFor">{{comment.ID}}</div>
                                </div>
                                <div class="ui-grid-row row-div">
                                   <div class="ui-grid-col-3 labelFor">Comment: </div>
                                   <div class="ui-grid-col-7 displayFor">{{comment.Comment}}</div>
                                </div>
                                <div class="ui-grid-row row-div">
                                   <div class="ui-grid-col-3 labelFor">Author: </div>
                                   <div class="ui-grid-col-7 displayFor">{{comment.CommentBy}}</div>
                                </div>
                             </div>
                         </div>
                     </div>
                  </div>
               </template>
           </p-dataList>
/*INPUT COMPONENTS*/
           <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5;" [hidden]="!addNewComment">
                        <div class="ui-grid-row">
                            <div class="ui-grid-col-12">
                                <div class="ui-grid ui-grid-responsive ui-fluid comment">
                                    <div class="ui-grid-row row-div">
                                        <div class="ui-grid-col-3 labelFor">Comment: </div>
                                        <input type="text" pInputText [(ngModel)]="newComment.Comment" class="displayFor"/>
                                    </div>
                                    <div class="ui-grid-row row-div">
                                        <div class="ui-grid-col-3 labelFor">Author: </div>
                                        <input type="text" pInputText [(ngModel)]="newComment.CommentBy" class="displayFor"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <div class="div-row" style="margin-left:40%;">
                            <button pButton type="button" label="Cancel" (click)="cancelComment()" class="actionBtn" style="width:150px;"></button>
                            <button pButton type="button" label="Save" (click)="saveComment()" class="actionBtn" style="width:150px;"></button>
                        </div>
                    </div>

Angular2 Warten HttpPost-Antwort

InformationsquelleAutor DaRoGa | 2016-09-27

3

Wie Sie bemerkt: Observables Arbeit async - so alles nach Ihrer .subscribe nennen, wahrscheinlich wird aufgerufen, bevor der code in der .subscribe Rückruf.

Zu beheben, müssen Sie den code, das hängt davon ab, die Ergebnisse der subscribe Aufruf in seiner callback:
```
saveComment(): void{
    console.log(this.newComment);
    this.repackService.AddComment(this.newComment)
                    .subscribe((data: RepackComment) => {
                        this.addedComment = data;

                        //add your code here
                        console.log("added Comment: " + this.addedComment);
                        this.comments.push(this.addedComment);
                        this.addNewComment = false;
                    },
                    error => console.log(error),
                    () => console.log('Finished creating new comment'));
}
```
Auch das Objekt, das Sie wieder aus deinem Beitrag nennen, entspricht nicht Ihrer Vorlage. Ich würde vorschlagen, diese Veränderung in Ihrem AddComment Anruf mit RepackComment mit einer solchen Konstruktor:
```
public AddComment = (comment: RepackComment): Observable<RepackComment> => {
    var json = JSON.stringify({ comment : comment.Comment, rr_id : comment.RepackId, comment_by : comment.CommentBy });
    return this.http.post(this.commentUrl + 'Add', json, {headers: this.headers})
                    .map((response: Response) => response.json())
                    .map(res => new RepackComment(res.id, res.comment, res.comment_by))
                    .catch(this.handleError);
}
```
- Wenn ich diese ausführen, ich bekomme kein Fehler in der Konsole oder so, aber der DOM wird aktualisiert und zeigt auf kein Objekt vorhanden, so zeigt er mit leeren Werten
- Aber es zeigt, dass Sie die Meldung in der Konsole mit "added Comment: { ... }"? Wie sieht dein template Aussehen?
- ja ich bekomme: added Comment: [object Object] damit ich nicht bekommen ein json-Objekt oder etwas, dessen nur den text [object Object]
- ich werde zu aktualisieren, das entsprechende Teil meiner Vorlage in meine Frage jetzt
- Versuchen Sie eine console.log(this.addedComment);, so dass es zeigt das gesamte Objekt und prüfen, ob es leer ist
- Ok, ja das scheint mir das Objekt so wie es sein sollte
- Vorausgesetzt this.addedComment ist die richtige Objekt, die Sie könnten versuchen, schneiden Sie die array - vielleicht primeNG nicht die Veränderungen, die für einige ungerade Grund: this.comments.push(this.addedComment); this.comments = this.comments.slice();
- Erklären Sie den Zweck dieser bitte? im nicht sicher, was das bedeutet
- Nein, das hat nicht funktioniert entweder leider
- Die .slice([begin[, end]) Methode ermöglicht es Ihnen, zu extrahieren, die einen bestimmten Bereich eines Arrays zu einem neuen array. Sie können sich jedoch ohne Argumente, die Kopien, die das gesamte array in einen neuen.
- Macht Sinn 🙂 jeden Tag etwas neues lernen
- Okay, dann ist die Letzte Sache, die ich denken kann, ist der Aufruf von change-detection-direkt - ich will hinzufügen, dass auf meine Antwort in einer Sekunde.
- Auch die Dokumentation von primeNG hier primefaces.org/primeng/#/datatablecrud es sieht aus wie es sollte ihn abholen, einfach indem das array
- Kein Glück leider 🙁
- Kannst du bitte die Ausgabe von console.log(this.addedComment); dann? Das ist wirklich seltsam :S
- ich habe ein snippet von der Konsole auf meine Frage
- Dort gehen Sie... das Objekt, das Sie wieder von Ihrem save nennen, hat eine andere Struktur als Ihre Vorlage erwartet. id vs ID, comment vs Comment, comment_by vs CommentBy.
- ah Mist wie konnte ich das übersehen!!!!!! danke krank versuchen, und ordnen Sie Sie jetzt und sehen, was ich bekomme
- Arbeitete ein Charme. Einfache Dinge. Vielen Dank für all Ihre Hilfe und für den Unterricht mir so viele Dinge in einem Rutsch 🙂
- Froh, dass ich helfen konnte!! 🙂
InformationsquelleAutor rinukkusu

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.