Question

我开发了自动填充表单，它基于 ng-select 数据自动填充数据。但我面临的唯一问题是，当我尝试删除所选数据时，它会向我抛出 Cannot read property 'pincode' of null 错误。请查找并尝试解决此错误。我在下面分享我的代码。提前致谢。

注册组件.html

<div class="wrapper">
  <div class="main_content">
    <div class="header">
      <strong><b>Tell us more about you</b></strong>
    </div>
    <div class="info">
      <h3>Basic Details</h3>

      <form [formGroup]="form">
        <div class="form-row">
          <div class="col-md-4 mb-3">
            <label for="validationDefault01"> Name*</label>

            <input
              type="text"
              class="form-control no-border"
              id="validationDefault01"
              placeholder="Enter your name"
              required
            />
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault02">Email*</label>
            <input
              type="email"
              class="form-control"
              id="validationDefault02"
              placeholder="example@domain.com"
              required
            />
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault06">Pin Code*</label>
         
            <ng-select
              class="custom"
              [items]="observeData"
              name="somthing"
              bindLabel="pincode"
              autofocus
              (ngModelChange)="onPincodeSelected($event)"
              [(ngModel)]="PinSelected"
              [ngModelOptions]="{ standalone: true }"
              highlightColor="#9575cd"
              highlightTextColor="#fff"
            >
            </ng-select>
            
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault03">Village*</label>
            <input
              type="text"
              class="form-control"
              id="validationDefault03"
              placeholder="Your Village"
              required
              [value]="PinSelected.village" // Here I am auto-filling the village name
              readonly
            />
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault03">Taluka*</label>
            <input
              type="text"
              class="form-control"
              id="validationDefault03"
              placeholder="Your Taluka"
              required
              [value]="PinSelected.taluka"   // Here I am auto-filling the taluka name
              readonly
            />
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault04">District*</label>
            <input
              type="text"
              class="form-control"
              id="validationDefault04"
              placeholder="Your state"
              required
              [value]="PinSelected.district" // Here I am auto-filling the district name
              readonly
            />
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault05">State*</label>
            <input
              type="text"
              class="form-control"
              id="validationDefault05"
              placeholder="Your District"
              required
              [value]="PinSelected.state" // Here I am auto-filling the State name 
              readonly
            />
          </div>
          
        </div>
        <button class="button"><span>Continue </span></button>
      </form>

     

      <br />
    </div>
  </div>
</div>

注册页面.component.ts

import { Component, OnInit } from '@angular/core';
import { data } from 'jquery';
import { Pincodes } from 'src/app/Model/Pincodes';
import { MetadataServiceService } from 'src/app/shared/services/metadata-service.service';
import { Observable, of } from 'rxjs';

import 'rxjs/add/operator/filter';
import { FormGroup } from '@angular/forms';




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

export class RegisterPageComponent implements OnInit {

  
 observeData :Observable< Pincodes[]>  

  modifiedText: any;
  PinSelected : any = {}
 searchValue : string
 form: FormGroup;
 
 constructor(private _metadataService: MetadataServiceService) { 
   
    
    
  }

 ngOnInit(){
    
   this._metadataService.GetPincodes()
   .subscribe(res=> {
      this.observeData = res.data;
    });


  
  

  


onPincodeSelected(val : Pincodes){
    console.log("value" + val);
    this.customFunction(val)

    
  }
  customFunction(val : Pincodes){
    this.modifiedText = " Pin : " + val.pincode + "\n" + "  District : " + val.village + "\n" + "  Taluka : " + val.taluka
      console.log("modifiedText" + this.modifiedText);
      console.log("Pincode Selected" + this.PinSelected);
      console.log("observeData Selected" + this.observeData);
      
      
      
      
      
  }
  
 
  

}

当我点击那个十字输入新数据时。它向我展示了这两个错误

Answer 1

这个错误是因为您在 PinSelected 组件中没有定义属性村，您可以修复它，将 HTML 的第 60 行从 PinSelected.village 更改为 PinSelected?.village

Answer 2

您有 3-4 个 div 标签，您可以在其中根据前一个 div 填充数据。

您可以将 3-4 个 div 标签包含在另一个 div 标签或 ng-container 标签中，并添加这样的条件。

<ng-container *ngIf="pinSelected">
  <div1></div1>
  <div2></div2>
  <div3></div3>
</ng-container>

我不知道为什么它会显示这些错误

2 个答案: