Fatal编程技术网
  • javascript/
  • Javascript 角度5：错误类型错误：无法读取属性'；nativeElement'；未定义的

Javascript 角度5：错误类型错误：无法读取属性'；nativeElement'；未定义的

javascript angular typescript

Javascript 角度5：错误类型错误：无法读取属性'；nativeElement'；未定义的,javascript,angular,typescript,Javascript,Angular,Typescript,我知道我不是第一个问这个问题的，在这里我在Angular 5应用程序中工作，在这里我需要以编程方式打开一个手风琴 在这里，一切都很好，正如我在stackblitz中所期望的那样工作，但在我的项目中没有 我已经验证了两个项目的所有脚本引用及其对齐方式。我找不到任何差异 闪电战： 错误： ERROR TypeError: Cannot read property 'nativeElement' of undefined at eval (eval at ../../../../../src

我知道我不是第一个问这个问题的，在这里我在Angular 5应用程序中工作，在这里我需要以编程方式打开一个手风琴

在这里，一切都很好，正如我在stackblitz中所期望的那样工作，但在我的项目中没有

我已经验证了两个项目的所有脚本引用及其对齐方式。我找不到任何差异

闪电战：

错误：

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at eval (eval at ../../../../../src/app/Components/List And Grid View Components/common/common.component.ts (main.bundle.js:28), <anonymous>:56:20)
    at SafeSubscriber.schedulerFn [as _next] (core.js:4331)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
    at SafeSubscriber.next (Subscriber.js:187)
    at Subscriber._next (Subscriber.js:128)
    at Subscriber.next (Subscriber.js:92)
    at EventEmitter.Subject.next (Subject.js:56)
    at EventEmitter.emit (core.js:4299)
    at QueryList.notifyOnChanges (core.js:6439)
    at checkAndUpdateQuery (core.js:12833)
common.component.html

<div class="accordion col-sm-12" id="accordion1" *ngFor='let data of dropdownData; let i=index'>
        <div class="accordion-group">

          <div class="accordion-heading">
            <a class="accordion-toggle h6" data-toggle="collapse"    data-parent="#accordion1" href="#collapseTwo + i" #accordian>
              {{data?.CAMD_ENTITY_DESC}}
            </a>
          </div>
//other codes
</div>
</div>
package.json

"dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angular-web-storage": "^2.0.0",
    "angular-webstorage-service": "^1.0.2",
    "auth0-js": "^9.3.1",
    "bootstrap": "^4.1.1",
    "core-js": "^2.4.1",
    "dateformat": "^3.0.3",
    "jquery": "^3.3.1",
    "jquery.js": "0.0.2-security",
    "popper.js": "^1.14.3",
    "public-ip": "^2.4.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  }
有谁能告诉我我在哪里犯的错误以及如何解决这些错误。

这是因为
@ViewChildren（'accordian'）
找不到任何元素。视图中没有一个元素具有名为
accordian
的引用。要放置引用，请按如下方式执行：

<div #reference></div>
这就是您得到未定义的
。试着做

console.log(this.components.toArray())
查看什么是查询。修正你的逻辑。所有与Angular相关的东西都在这里工作。

就在那里，我忘了添加common.component.html文件@LazarLjubenović也许您的项目中接收数据有延迟？你收到的是正确的吗？在我的真实项目中，没有延迟，它正确绑定@Surajraowwhat是console.log（elem）的输出？nativeElement:a.accordion-toggle.h6我在console@Saksham Gupta中得到了这个 
<body>

  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>


</body>

"styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]

"dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angular-web-storage": "^2.0.0",
    "angular-webstorage-service": "^1.0.2",
    "auth0-js": "^9.3.1",
    "bootstrap": "^4.1.1",
    "core-js": "^2.4.1",
    "dateformat": "^3.0.3",
    "jquery": "^3.3.1",
    "jquery.js": "0.0.2-security",
    "popper.js": "^1.14.3",
    "public-ip": "^2.4.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  }

<div #reference></div>

<div #accordian></div>

let elem = this.components.toArray()[this.id];

console.log(this.components.toArray())