Question

我有一个像这样的网址：

https://example.com/?username1=Dr&Organization=Pepper&action=create

我需要在文本框内的浏览器中显示它。

<input type="text" name="varname" value="Dr">

我需要在我的文本框中获取Dr

Answer 1

我假设您的url端点返回JSON，并且您尝试使用返回的数据填充输入值。

首先在模块依赖项中导入HttpClientModule：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后在你的foo.component.ts中你可以在构造函数中注入一个HttpClient实例。

constructor(private http: HttpClient){
  }

然后您可以像这样使用HttpClient实例http：

this.http.get('https://example.com/?username1=Dr&Organization=Pepper&action=create').subscribe(data => {
      console.log(data);
    });
  }

然后可以将其放入属性（myProp）中，可以像这样引用：

<input *ngIf="myProp" type="text" name="varname" value="myProp">

请注意，我们使用*ngIF确保在myProp不是null或undefined之前加载我们的媒体资源。

主要应用程序组件 - app-root

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  name = null;


  constructor(private http: HttpClient){
  }

  ngOnInit(): void {
    this.http.get('https://example.com/?username1=Dr&Organization=Pepper&action=create').subscribe(data => {
    // data = result: {name: 'Derek da Doctor'}
      this.name = data.result.name;
    });
  }
}

app.component.html

<input *ngIf="name" type="text" name="varname" value="{{name}}">

如何从Angular 2.0中的URL检索某些数据

1 个答案: