Question

我的应用程序存在一些问题。我想实现一个新功能 - 添加一个表单，您输入用户名和密码，然后将其发送到更改网址。我的应用程序从URL获取JSONS，JSON内容取决于用户名和密码。模式是：somewebsite.com/username/password。

组件

import { Component, enableProdMode, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { VehicleService } from './vehicle.service';
import { User } from './user';

enableProdMode();

@Component({
  selector: 'vehicle-json',
  templateUrl: './vehicle.html',
  providers: [VehicleService]
})
export class VehicleComponent implements OnInit {
  public vehicles: GeneralVehicle[];
  public user: FormGroup;

  ngOnInit() {
    this.user = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
    });
  }

  constructor(private vehicleService: VehicleService) {
    this.vehicleService.getVehicle().subscribe(vehicle => {
      this.vehicles = vehicle;
    });
  }

  onSubmit({ username, password }: { username: User, password: User }) {
    console.log("test");
  }
}

interface GeneralVehicle {
  status: number;
  dallases: Vehicle[];
}

interface Vehicle {
  vehicle_id: number;
  dallassettings: string;
  dallasupdated: string;
  dallas_list: DallasList[];
}

interface DallasList {
  number: number;
  auth: number;
}

服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { User } from './user';
import 'rxjs/add/operator/map';

@Injectable()
export class VehicleService {
    //used predefined username and password to check if my connection to the website is fine
    private defusername = 'defaultUSERNAME'
    private defpassword = 'defaultPASSWORD'
    private url = 'mywebsite.com/' + this.defusername + '/' + this.defpassword;

    constructor(private http: Http) { }
    getVehicle() {
        return this.http.get(this.url)
            .map(res => res.json());
    }
}

模板

<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
    <label>Username:
        <input formControlName="username" type="text" placeholder="Your username">
    </label>
    <label>Password:
        <input formControlName="password" type="password" placeholder="Your password">
    </label>
    <button type="submit">Login</button>
</form>

<div *ngIf="vehicles">
    <b>Status: {{vehicles?.status}}</b>
    <div *ngFor="let vehicle of vehicles.dallases">
        <ul>
            <li>Vehicle ID: {{vehicle.vehicle_id}}</li>
            <li>Dallas settings: {{vehicle.dallassettings}}</li>
            <li>Dallas updated: {{vehicle.dallasupdated}}</li>
            <li>Dallas list:</li>
            <div *ngFor="let d of vehicle.dallas_list">
                <ul>
                    <li>Number: {{d.number}}</li>
                    <li>Auth: {{d.auth}}</li>
                </ul>
            </div>
        </ul>
    </div>
</div>

我不知道如何实现该功能。当我编辑onSubmit方法并添加：console.log(username);时，无论是否填写输入，它都返回'undefined'。

Answer 1

修改组件中的OnSubmit()功能，从formGroup值中获取username / password：

onSubmit(user) {

    // console.log(user.value.username);    // <-- To test username
    // console.log(user.value.password);    // <-- To test password

    this.vehicleService
        .getVehicle(user.value.username, user.value.password)
        .subscribe(vehicles => {

        this.vehicles = vehicles;
    });
}

修改服务中的getVehicle()方法以使用username＆amp; password用于生成动态网址：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { User } from './user';
import 'rxjs/add/operator/map';

@Injectable()
export class VehicleService {
    //used predefined username and password to check if my connection to the website is fine
    private defUsername = 'defaultUSERNAME'
    private defPassword = 'defaultPASSWORD'
    private defUrl = 'mywebsite.com/' + this.defusername + '/' + this.defpassword;

    constructor(private http: Http) { }

    getVehicle(username?: string, password?: string) {

        const url = (!username || !password) ? defUrl : 'mywebsite.com/' + username + '/' + password;

        return this.http.get(url)
            .map(res => res.json());
    }
}

通过上述更改，您的新功能应该开始工作。

希望这有帮助。

Angular2如何使用表单更改url

1 个答案: