Question

Angular的全新功能，刚刚开始充实一个输入框，它可以通过单击图标来接受坐标或用户地址作为字符串。 .ts文件中的getRequest（）方法需要确定用户输入的字符串类型-以便正确验证和设置API请求。我试图通过单击图标来添加动态[ngClass]，但实际上无法从.ts文件获取类名。如何访问元素的动态类名称？我希望是否可以检查输入元素设置在什么类上，从而知道需要什么数据。还是我应该以其他方式解决这个问题？谢谢。

HTML

 <div class="locationOptions home" 
   (click)="showHomeCoords=!showHomeCoords; 
            homeAddressFromField.value=null;">

    <i #homeIcon class="material-icons" *ngIf="!showHomeCoords">home</i>
    <i #homeCrosshairIcon class="material-icons" *ngIf="showHomeCoords">my_location</i>
</div>

  <mat-form-field formGroup='homeForm' name="myHome" class="half-width" appearance="outline" flex>

    <mat-label>Home Address</mat-label>
      <input type="text"
             formControlName="homeInput"
             [ngClass]="showHomeCoords ? 'coords' : 'address'"
             matInput placeholder={{changeHomePlaceHolder()}} 
             #homeAddressFromField 
              required>
    </mat-form-field>

.TS

@ViewChild('homeAddressFromField') homeAddressFromField : ElementRef; 

 detectCoordinateOrAddress(locationEntered:any){

   let homeField = this.homeAddressFromField.nativeElement;

   let a1: any;

  if(homeField.querySelectorAll('.coords'){

       a1 = this.isThisInputCoordinateGood(locationEntered)

  }else{

       a1 = parseAddress.parseLocation(locationEntered)

  }

  return a1;

 };


getRequest(home:any){

  let h = this.detectCoordinateOrAddress(home);

  this.setRequest(h);

  this.returnInfo(this.request);

}

Answer 1

好的，我的建议是在您的输入字段中，使用这样的变量

      <input type="text"
         formControlName="homeInput"
         [ngClass]="homeCoordinates"
         matInput placeholder={{changeHomePlaceHolder()}} 
         #homeAddressFromField 
          required>

，然后将变量设置为.ts函数中正确的类名。

或者，如果您真的想使用前面提到的方式，请在.ts函数内部将变量showHomeCoords设置为true / false。

角度JS-一个<input>字段接受两种不同类型的数据（坐标字符串或地址字符串）

1 个答案: