Angular 5將表單數據同步傳遞到另一個組件的下拉菜單

Question

我有一個表單（物料對話框模態），該表單允許用戶創建一個帳戶，一旦用戶單擊“注冊”按鈕，該用戶將與他創建的那個帳戶的用戶名留在同一頁上。 我遇到的問題是它已被創建，但沒有與對話框模態的關閉同步更新。 意味着應該注冊用戶，並在下拉菜單中同時填充創建的用戶值，以提高用戶體驗。 我不希望用戶分散當前頁面的注意力，因為如果用戶輸入了詳細信息並且重新加載了該頁面，那么他輸入的所有數據都會丟失。 所以我不希望這種情況發生。 因此，我為此創建了以下代碼。

<section class="container-fluid with-maxwidth chapter">

    <article class="article">
        <div class="box box-default">
            <div class="box-body">

                <mat-horizontal-stepper [linear]="true" #stepper>

                    <mat-step [stepControl]="firstFormGroup">
                        <form [formGroup]="firstFormGroup">
                            <ng-template matStepLabel>Project Registration</ng-template>

                            <div class="form-group row"></div>
                            <div class="form-group row">
                                <label for="name" class="col-md-0 control-label"></label>
                                <div class="col-md-5">
                                    <mat-input-container class="full-width">
                                        <input required [(ngModel)]="project.name" formControlName="nameCtrl" id="name"
                                               matInput placeholder="Project name">
                                    </mat-input-container>
                                </div>
                            </div>

                            <!-- Repository details -->

                            <div class="form-group row">
                                <label for="name" class="col-md-0 control-label"></label>
                                <div class="col-md-5">
                                    <mat-input-container class="full-width">
                                        <input required [(ngModel)]="project.url" formControlName="urlCtrl" id="repo"
                                               matInput placeholder="Repository URL">
                                    </mat-input-container>
                                </div>
                                <div class="col-md-7">
                                    <div class="callout1 text-muted callout-info1">
                                        <p>e.g. https://github.com/username/MyApp.git or
                                            git@github.com:username/MyApp.git.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-md-0 control-label">
                                </label>
                                <div class="col-md-5">
                                    <mat-form-field>
                                        <mat-select placeholder="Repository Credentials" required
                                                    [(ngModel)]="project.account.id" formControlName="typeCtrl">
                                            <mat-option *ngFor="let account of accounts" [value]="account.id">
                                                {{account.name}} ({{account.accountType}})
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                                <div class="col-md-7">
                                    <div class="callout1 text-muted callout-info1">
                                        <p>
                                            <a href="javascript:;" (click)="openDialog()">Add credentials</a>
                                            <br/>
                                            Credentials are required for automatic test creation and check-in.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <mat-card-actions>
                                    <button mat-raised-button color="primary"
                                            class="nav-btn"
                                            [disabled]="firstFormGroup.invalid"
                                            (click)="save(stepper);">Save & Next
                                    </button>
                                </mat-card-actions>
                            </div>
<div class="form-group row">
                  <div class="col-md-0"></div>
                  <div class="col-md-8">
                      <button [disabled]="!heroForm.valid" mat-raised-button color="primary" (click)="create();"
                              class="btn-w-md no-margin-left">Register
                      </button>
                      <button mat-button type="button" color="primary" class="btn-w-md" (click)="onClose();">Cancel
                      </button>
                  </div>
              </div>


   </form>
                    </mat-step>
                    </mat-horizontal-stepper>
                    </div>
                    </div>

                    </article>
                    </section>

從模板的以下代碼中，如果轉到其他頁面然后再轉到此處，則用戶名將正確添加到下拉列表中。 但是我不希望用戶來回查看他的憑證是否已注冊，而是我想顯示動態創建的憑證，以便他可以進一步移動。

<mat-form-field>
                                        <mat-select placeholder="Repository Credentials" required
                                                    [(ngModel)]="project.account.id" formControlName="typeCtrl">
                                            <mat-option *ngFor="let account of accounts" [value]="account.id">
                                                {{account.name}} ({{account.accountType}})
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>

注冊對話框組件的代碼

export class RegisterComponent implements OnInit{
  @Input() entry: Account = new Account();
create(entry: Account) {
    this.handler.activateLoader();
    this.snackbarService.openSnackBar(this.entry.name + " registering...", "");
    this.accountService.create(entry).subscribe(results => {
      this.entry = entry;
      this.handler.hideLoader();
      if (this.handler.handle(results)) {
        return;
      }
    this.snackbarService.openSnackBar(this.entry.name + " registered successfully", "");
    this.onClose();
    // this.router.navigateByUrl('/app/projects', {skipLocationChange: true}).then(()=>
    // this.router.navigate(['/app/projects/new'])); 
    this.router.navigate(['/app/projects/new']);
    }, error => {
      this.handler.hideLoader();
      this.handler.error(error);
    });
  }

  onClose(){
    this.dialogRef.close();
  }
}

這是我編寫服務的地方：

import { Account } from './../models/project.model';
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Headers } from '@angular/http';
import { Observable, Subject } from 'rxjs';
import 'rxjs/add/observable/timer';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class AccountService {

  private serviceUrl = '/api/v1/accounts';
  private entry = new Subject<Object>();
  entry$ = this.entry.asObservable();
  constructor(private http: HttpClient) {
  }


  create(entry: Account): Observable<any> {
    return this.http.post(this.serviceUrl, entry);
  }

  emitAccount(entry){
    this.entry.next();
  }

}

我希望用戶位於同一頁面上，並應使用最新結果更新下拉列表。 那怎么可能？ 你能建議我嗎？ 我的代碼做錯了什么。

謝謝。

Answer 1

創建服務：

let newEntry = this.http.post(this.serviceUrl, entry);
emitAccount(newEntry);
return newEntry;

注冊組件：

entry$.subscribe(updateAccount => {
accounts.push(updateAccount)
}

Answer 2

所以要檢查..這是關於這個部分？

            <mat-option *ngFor="let account of accounts" [value]="account.id">
                                        {{account.name}} ({{account.accountType}})
                                    </mat-option>

因為注冊后我在您的代碼重新填充帳戶數組中看不到任何內容。

我看不到綁定帳戶數組的位置。