VS-Code gibt "Identifier nicht definiert" Fehler bei der Verwendung von Winkel async und elvis Operator mit beobachtbaren

Question

Ich bekomme die rote unterstrichene Warnmeldung in VScode Editor sagen, die Kennung "frProfileData" ist nicht definiert, aber die Chrome-Konsole zeigt nicht Fehler. Ich benutze async Rohr mit elvis Betreiber, weshalb die Kennungen müssen gelöst werden, nachdem async Anfrage erfüllt ist. Bitte helfen Sie mir mit diesem Problem.

MY Typoskript Code:

import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { FundraiserLoadService } from '../../../services/fundraiser- 
load.service' 
import { Subscription } from 'rxjs/Subscription'; 
import { Observable } from 'rxjs/Observable' 
@Component({ 
    selector: 'app-fr-profile', 
    templateUrl: './fr-profile.component.html', 
    styleUrls: ['./fr-profile.component.css'] 
}) 
export class FrProfileComponent implements OnInit { 
responseData: Observable<object>; 
frLoadProfSubscr: Subscription; 
constructor(
private _activatedRoute: ActivatedRoute, 
private _router: Router, 
private _frLoadSerivice: FundraiserLoadService 
) { } 

ngOnInit() { 
let frName = this._activatedRoute.snapshot.params['frname'] 
this.responseData = this._frLoadSerivice.getFrProfile(frName) 

     } 

} 

Mein HTML-Code:

<div class="on-load accent-gray-light"> 
    <div class="container title-div"> 
     <h1 class="text-gray"> 
      <strong>{{(responseData | async)?.frProfileData[0]?.title}}</strong> 
     </h1> 
    </div> 

    <div class="container outer-container"> 

     <!-- ######################################## ROW ONE #############################################--> 

     <div class="row row-wrapper"> 
      <!-- ########### LEFT ################--> 
      <div class="col-xs-12 col-md-8 row1-left"> 
       <div class="img-wrapper"> 
        <img class="img-responsive fr-img" [src]="(responseData | async)?.frProfileData[0]?.imagePath[0]" /> 
       </div> 
      </div> 


      <!-- ########### RIGHT ################--> 

      <div class="col-xs-12 col-md-4 row1-right"> 
       <!-- LOCATION AND CATEGORY --> 
       <div class="col-xs-12 text-gray-l location" style="border-bottom:1px solid #e9e9e9"> 
        <p class="h5 pull-left"> 
         <i class="glyphicon glyphicon-map-marker"></i>&nbsp; 
         <strong>{{(responseData | async)?.frProfileData[0]?.city}}</strong> 
        </p> 
        <p class="h5 pull-right"> 
         <i class="glyphicon glyphicon-tag"></i>&nbsp; 
         <strong>{{(responseData | async)?.frProfileData[0]?.category}}</strong> 
        </p> 
       </div> 

       <!-- AMOUNT RAISED AND PROGRESS --> 
       <div class="col-xs-12"> 
        <div style="margin:20px 0px 0px 0px ;padding:5px 0px"> 
         <p class="bold-numbers-gr" style="margin:0px">Rs.{{(responseData | async)?.frProfileData[0]?.amountRaised}}</p> 
         <p class="text-gray-l" style="margin:0px;font-size:1.2em">Raised of {{(responseData | async)?.frProfileData[0]?.amountToRaise}}</p> 
        </div> 
       </div> 

       <!-- Progress Bar --> 
       <div class="col-xs-12 pr-br-wpr"> 
        <div style="margin: 0px;padding:0px"> 
         <div class="progress"> 
          <div class="progress-bar accent-light" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
          </div> 
         </div> 
        </div> 
       </div> 

       <!-- Supporters --> 
       <div class="col-xs-12 supporters-div "> 
        <div class="col-xs-6 pull-left" style="margin: 0px;padding:0px"> 
         <h2> 
          <strong>67</strong> 
         </h2> 
         <p> 
          <strong>Supporters</strong> 
         </p> 
        </div> 
        <div class="col-xs-6 pull-right" style="margin: 0px;padding:0px"> 
         <h2> 
          <strong>34</strong> 
         </h2> 
         <p> 
          <strong>Days left</strong> 
         </p> 
        </div> 
       </div> 

       <!-- DONATE--> 
       <div class="col-xs-12 btn-wrapper text-center"> 
        <button class="btn donate-btn button-accent" type="button"> 
         <span style="font-size:1.3em"> 
          <strong>Donate Now</strong> 
         </span> 
        </button> 
        <p class="input-caption ">Payment options: Account number</p> 
       </div> 
      </div> 
     </div> 


     <!-- ######################################## ROW TWO #############################################--> 

     <div class="row row-wrapper"> 
      <!-- ########### LEFT ################-->    
      <div class="col-xs-12 col-md-8 row2-left"> 
       <h3 class="text-center special-heading">STORY</h3> 
       <p class="lead">{{(responseData | async)?.frProfileData[0]?.story}}</p> 

       <br/><br/> 
       <h3><strong>Account Name: </strong>{{(responseData | async)?.frProfileData[0]?.accName}}</h3> 
       <h3><strong>Bank Name: </strong>{{(responseData | async)?.frProfileData[0]?.bankName}}</h3> 
       <h3><strong>Account No: </strong>{{(responseData | async)?.frProfileData[0]?.accNo}}</h3> 
       <h3><strong>IFSC code: </strong>{{(responseData | async)?.frProfileData[0]?.ifsc}}</h3> 
      </div> 




      <!-- ########### RIGHT ################--> 

      <div class="col-xs-12 col-md-4 row2-right"> 
       <div class="started-by accent-gray-light"> 
        <p class="h5"> 
         <strong>Campaign By:&nbsp;{{(responseData | async)?.frProfileData[0]?.registeredUserData?.name}}</strong> 
        </p> 
        <hr style="border:0.5px solid #c9c9c9"> 
        <p class="h5"> 
         <strong> 
          <i class="fa fa-envelope"></i> Contact</strong> 
        </p> 
        <p class="h5"> 
         <strong> 
         2 Campaigns | 4 Donated 
         </strong> 
        </p> 
       </div> 
      </div> 
     </div> <!-- ########### ROW TWO END ################--> 
    </div> 
</div> 

Answer 1

Ok das Problem durch die Lösung von santosh singh in den Kommentaren gegeben gelöst wurde.

Es gab eine Erweiterung nämlich "Angular Language Service", die diese lästige Sache verursachte. Ich habe es einfach deaktiviert und mein VS-Code-Fenster neu geladen, die Warnung war dann weg.

Answer 2

Sie haben "Angular language service" installiert, das dieses Problem verursacht hat. Deaktivieren Sie diese Erweiterungen und laden Sie den Visual Studio-Code neu.