-1

这是我的 html 文件，我希望当用户填写 PIN 代码时，应使用 API 数据自动填写其他地址，如 DISTRICT、STATE 和 CITY。

API 是：https ://api.postalpincode.in/pincode/244713

<div class="cardParts5">
                <div class="cardTitle">
                    Communication Address
                </div>

                <div class="addressContainer">
                  
                    <div class="field1">
                        <mat-form-field class="example-full-width" appearance="fill" class="mat-form">
                            <mat-label>Pin Code*</mat-label>
                            <input matInput maxlength="6" [(ngModel)]="pinCode" name="pinCode">
                            <button (click)="getAdd(pinCode)">home</button>
                        </mat-form-field>
                    </div>

                    <div class="field2">
                        <mat-form-field class="example-full-width" appearance="fill" class="mat-form">
                            <mat-label>State*</mat-label>
                            <input matInput>
                        </mat-form-field>
                    </div>

                    <div class="field3">
                        <mat-form-field class="example-full-width" appearance="fill" class="mat-form">
                            <mat-label>District*</mat-label>
                            <input matInput>
                        </mat-form-field>
                    </div>

                    <div class="field4">
                        <mat-form-field class="example-full-width" appearance="fill" class="mat-form">
                            <mat-label>City/Village*</mat-label>
                            <input matInput>
                        </mat-form-field>
                    </div>
                </div>
            </div>

这是我的component.ts文件



import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-final-pay',
  templateUrl: './final-pay.component.html',
  styleUrls: ['./final-pay.component.css']
})



export class FinalPayComponent implements OnInit {
  pinDetails:any;
  finalAddress:any;
  public pinCode = '';

  constructor( private httpClient: HttpClient ) { }

  ngOnInit(): void { }
  
  getAdd(pinCode){
      this.http.get(`https://api.postalpincode.in/pincode/${pinCode}`).subscribe((val)=>{
        this.pinDetails = JSON.stringify(val);
        this.finalAddress = JSON.parse(this.pinDetails);
        console.log(this.finalAddress);
    });
  }

在这里，我试图将 API 详细信息存储在 finalAddress 变量中，但即使我写 {{finalAddress.Message}} 它也会给我一个错误。如果有人有解决方案，请帮助我。

4

1 回答 1

1

你是在正确的方向。您需要稍微修改您的代码：

您需要添加[(ngModel)] 到要填充值的每个输入字段。然后将它们分配给变量。API 返回多个地址对象，因此您需要选择一个（我先选择）。

更新您的代码：

在组件中添加这些变量：

  public state = '';
  public block = '';
  public district = '';
  public city = '';

然后在 html 中将其分配给相应的输入字段：

<input matInput [(ngModel)]="state" />

将 add 方法更新为：

getAdd(pinCode) {
    this.httpClient
      .get(`https://api.postalpincode.in/pincode/${pinCode}`)
      .subscribe((val) => {
        const [address] = val as any;
        this.finalAddress = address;
        console.log(this.finalAddress); // it returns multiple postOffices
        const postOffices = this.finalAddress.PostOffice;
        if (postOffices.length > 0) {
          this.state = postOffices[0].State;
          this.district = postOffices[0].District;
          this.city = postOffices[0].Name;
        }
      });
  }

这是工作演示

于 2021-10-14T14:47:45.897 回答