Question

在我的angular2应用程序中，我有一个谷歌登录oauth登录页面，其中用户使用谷歌注册，并被重定向到个人资料页面。成功登录后，我使用

重定向用户

navigateByUrl("/profile");

方法。我还设置了一个模型，通过DI将用户的电子邮件发送到个人资料页面。我遇到的问题是配置文件页面的所有内容都没有在方法中发布。只发布userName和userEmail值。这是代码。

Profile.component.html

  <form #f="ngForm" (ngSubmit)="addProfile(f.value, $event)">
        <div class="field-wrapper">
            <input type="text" placeholder="Enter Name" [(ngModel)]="profileData.UserName" name="UserName" ngModel disabled><i class="icon-Name"></i>
        </div>
        <div class="field-wrapper">
            <input type="text" placeholder="Enter Email" [(ngModel)]="profileData.UserEmail" name="UserEmail" ngModel disabled><i class="icon-Email"></i>
        </div>
        <div class="field-wrapper">
            <input type="text" #grades data-role="tagsinput" placeholder="Enter Grade" [(ngModel)]="profileData.Grades" ngModel name="Grades" ><i class="icon-Class"></i>
        </div>
        <div class="field-wrapper">
            <!--<input type="text" #subjects data-role="tagsinput" placeholder="Enter Subjects"  [(ngModel)]="profileData.Subjects" ngModel name="Subjects"><i class="icon-Subject" ></i>-->
        </div>
        <button type="submit" class="primary-btn" >Save Profile</button>
    </form>

Profile.compontent.ts

import { Router, ActivatedRoute } from '@angular/router';
import { ProfileData } from './profile.data';
import { ProfileService } from './profile.service';
import { ViewChild, ElementRef, AfterViewInit, Component, Input, Output, }     from '@angular/core';
import { FormsModule, NgForm, FormGroup, FormBuilder, FormControl, Validators   } from "@angular/forms";

declare var jQuery: any;
@Component({
selector: 'profile',
templateUrl: 'app/profile/profile.component.html',
providers: [ProfileService]
})

export class ProfileComponent implements AfterViewInit {
constructor(public profileData: ProfileData, public profileService:     ProfileService) {
    }

@ViewChild('grades') grades: ElementRef;
@ViewChild('subjects') subjects: ElementRef;

ngAfterViewInit() {
    jQuery(this.grades.nativeElement).tagsinput();
    jQuery(this.subjects.nativeElement).tagsinput();
}

addProfile(profile: any, event: Event) {
    event.preventDefault();   // because of https://github.com/angular/angular/issues/9936
    this.profileService.postUserProfile(profile);
}



}

addProfile方法只获取用户名和电子邮件或成绩。这是我的DataModel。

import { Injectable, Inject } from '@angular/core';

@Injectable()
export class ProfileData {

   public UserName: string;
   public UserEmail: string;
   public Subjects: string[];
   public Grades: string[];
}

Answer 1

我会为$versions = Get-SqlVersions | Out-String; $versions插件实现ControlValueAccessor：

tagsinput

<强> Plunker Example

Answer 2

您需要修改添加（提交）到表单

 <form #f="ngForm" (submit)="addProfile($event)">
         .....

所有未以Angular2表单

2 个答案: