VS代码在使用具有可观察性的角度异步和elvis运算符时给出“标识符未定义”错误

Question

我在VScode编辑器中收到红色下划线警告消息，说明标识符“frProfileData”未定义，但chrome控制台显示没有错误。我使用async管道与elvis运算符，这就是为什么必须在async请求满足后解析标识符。请帮我解决这个问题。

我的TYPESCRIPT代码：

 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)

        }

 }

我的HTML代码：

<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

您已经安装了导致此问题的"Angular language service"。禁用此扩展并重新加载visual studio代码。

Answer 2

好的问题是由santosh singh在评论中给出的解决方案解决的。

有一个扩展名为“Angular语言服务”，这引起了这个烦人的事情。我只是禁用它并重新加载我的VS代码窗口，警告就消失了。