1
同じユーザー情報を編集するためにモーダルウィンドウを開くオプションを持つプロファイルページを作成しようとしています。 角4 /タイプスクリプト/ファイアベース/角膜炎を使用しています。ユーザーのプロファイルデータがメイン画面に表示されていますが、モーダルウィンドウが起動されたときに入力フィールドの「値」として表示されません（画像参照）。モーダルの入力値とngModelとの結合がない
表示された値（黒く塗りつぶされたもの）は、編集しようとすると表示されますが、同じデータは表示されません。
Firebaseノードのコンテンツ例（ノード：/ユーザー）
注：これは/ユーザーノードのレコードの構造体のコピーを取得するには、インターネットブラウザからコピーされました。
kGAMmM5PYvMemxYrXcjaH3gOOYB4
address: "1234 Fake Street"
businessLinkCode: ""
city: "Faketown"
email: "[email protected]"
modifiedDate: "2017-07-25"
modifiedTime: "1:20:33 pm"
name: "John Smith"
phone: "1234567890"
photoUrl: "https://firebasestorage.googleapis.com/v0/b/tow..."
position: "Assistant"
state_: "North Fake State"
zipCode: "12345"
コンポーネントTS（略称）：
import { Component, OnInit } from '@angular/core';
import { PageTitleService } from '../../core/page-title/page-title.service';
import {fadeInAnimation} from '../../core/route-animation/route.animation';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import { AngularFireDatabase, FirebaseObjectObservable, FirebaseListObservable } from 'angularfire2/database';
import {FormControl, Validators} from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';
import { AuthService } from '../../services/auth.service';
...
export class UserProfileComponent implements OnInit {
user: FirebaseObjectObservable<any>;
...
constructor(
private authService: AuthService,
private db: AngularFireDatabase,
private userService: UserService,
private pageTitleService: PageTitleService,
private modalService: NgbModal
) {
this.users = db.list('/users');
}
...
ngOnInit() {
this.pageTitleService.setTitle('User Profile');
this.authService.user$.subscribe((user) => {
this.user = this.userService.getUser(user.uid)
});
}
...
// MODAL
open(content) {
this.authService.user$.subscribe((user) => {
this.user = this.userService.getUser(user.uid)
});
this.modalService.open(content).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
HTML
<div fxLayoutWrap="wrap" fxLayoutAlign="start">
<div fxFlex.gt-md="100" fxFlex.gt-sm="100" fxFlex="100">
<div class="user-content">
<md-card id="profile">
<div fxLayoutWrap="wrap" fxLayoutAlign="start" class="user-profile">
<div class="user-contact-info">
<button style="background-color: #004380; color: white; height: 45px; width: 45px; min-width: 0; padding: 1.5%; border-radius: 50%;" (click)="open(editProfilePicture)" md-raised-button class="mrgn-b-md"><md-icon>image</md-icon></button>
<div class="perfect-circle" style="height: 240px; width: 240px; margin: 0 auto; padding-top: 0%;">
<img class="img-responsive img-circle" [src]="(user | async)?.profile_imageUrl" alt="{{ (user | async)?.name }}" title="{{ (user | async)?.name }}">
</div>
<div class="contact-list">
<h2 style="text-align: center">{{ (user | async)?.name }}</h2>
<p style="font-weight: light; font-size: medium; text-align: center"> {{ (user | async)?.position }}</p>
<button style="background-color: #004380; color: white; margin-bottom: 10%;" (click)="open(editProfile)" md-raised-button class="mrgn-b-md">EDIT PROFILE</button>
<p><i class="fa fa-envelope mat-text-primary" aria-hidden="true"></i> <strong>E-mail:</strong><a href="mailto:{{ (user | async)?.email }}"> {{ (user | async)?.email }}</a></p>
<p><i class="fa fa-phone mat-text-primary" aria-hidden="true"></i> <strong>Phone:</strong><a href="tel:{{ (user | async)?.phone }}"> {{ (user | async)?.phone }}</a></p>
<p><i class="fa fa-map-marker mat-text-primary" aria-hidden="true"></i> <strong> Address:</strong><span> {{ (user | async)?.address }}</span></p>
<p><i class="fa fa fa-map mat-text-primary" aria-hidden="true"></i> <strong>City:</strong><span> {{ (user | async)?.city }}</span></p>
<p><i class="fa fa fa-globe mat-text-primary" aria-hidden="true"></i> <strong>State:</strong><span> {{ (user | async)?.state_ }}</span></p>
</div>
</div>
<ng-template #editProfile let-c="close" let-d="dismiss">
<div>
<div class="modal-header">
<h4 class="modal-title">Edit Profile</h4>
<button style="background-color: transparent; border: none; cursor: pointer;" type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<i style="font-size: large; color: gray" class="fa fa fa-times" aria-hidden="true"></i>
</button>
</div>
<form #form="ngForm" (ngSubmit)="submit(editUser)" class="form">
<md-input-container class="full-width">
<input mdInput placeholder="First and Last Name" type="text" required [(ngModel)]="editUser.name" [formControl]="nameFormControl">
</md-input-container>
<div class="flex-layout">
<md-input-container class="half-width">
<input mdInput placeholder="Position/Title" type="text" name="position" [(ngModel)]="editUser.position" [formControl]="positionFormControl">
</md-input-container>
<md-input-container class="half-width">
<span mdPrefix>+1 </span>
<input mdInput placeholder="Phone" #phone maxlength="10" type="tel" name="phone" required [(ngModel)]="editUser.phone" [formControl]="phoneFormControl">
<md-hint align="end">{{phone.value.length}}/10</md-hint>
</md-input-container>
</div>
<md-input-container class="full-width">
<input mdInput placeholder="Address" type="text" name="address" required [(ngModel)]="editUser.address" [formControl]="addressFormControl">
</md-input-container>
<div class="flex-layout">
<md-input-container class="third-width">
<input mdInput placeholder="City" type="text" name="city" required [(ngModel)]="editUser.city" [formControl]="cityFormControl">
</md-input-container>
<md-input-container class="third-width">
<input mdInput placeholder="State" type="text" name="state" required [(ngModel)]="editUser.state_" [formControl]="state_FormControl">
</md-input-container>
<md-input-container class="third-width">
<input mdInput placeholder="Zipcode" #zipcode maxlength="5" name="zipCode" required [(ngModel)]="editUser.zipCode" [formControl]="zipCodeFormControl">
<md-hint align="end">{{zipcode.value.length}}/5</md-hint>
</md-input-container>
</div>
<br>
<button style="background-color: #004380; color: white;" md-raised-button [disabled]="!form.valid" (click)="submit(user) + c('Close click')" class="mrgn-b-md">SAVE ACCOUNT</button>
<button style="background-color: gray; color: white;" md-raised-button type="button" class="mrgn-b-md" (click)="c('Close click')">CANCEL</button>
</form>
</div>
</ng-template>
<ng-template #editProfilePicture let-c="close" let-d="dismiss">
<div>
<div class="modal-header">
<h4 class="modal-title">Edit Profile Picture</h4>
<button style="background-color: transparent; border: none; cursor: pointer;" type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<i style="font-size: large; color: gray" class="fa fa fa-times" aria-hidden="true"></i>
</button>
</div>
<img class="img-responsive" [src]="(user | async)?.profile_imageUrl" alt="{{ (user | async)?.name }}" title="{{ (user | async)?.name }}">
<form #form="ngForm" (ngSubmit)="submit(user)" class="form">
<br>
<input type="file" name="image" class="inputfile form-control" required value="upload" (change)="filebuttoni($event)"/>
<br>
<button style="background-color: #004380; color: white;" md-raised-button [disabled]="!form.valid" (click)="submit(user) + c('Close click')" class="mrgn-b-md">SAVE IMAGE</button>
<button style="background-color: gray; color: white;" md-raised-button type="button" class="mrgn-b-md" (click)="c('Close click')">CANCEL</button>
</form>
</div>
</ng-template>
</div>
</md-card>
</div>
</div>
コンテンツには何ですか？ –
私はFirebaseの/ usersノードの例レコードを使って質問を更新しました。ありがとう！ – piercove
あなたはプランナーを作成できますか –