分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了无法在 Angular 中读取 null 的属性“getBoundingClientRect”，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_696_0@如何解决无法在 Angular 中读取 null 的属性“getBoundingClientRect”？开发过程中遇到无法在 Angular 中读取 null 的属性“getBoundingClientRect”的问题如何解决？下面主要结合日常开发的经验，给出你关于无法在 Angular 中读取 null 的属性“getBoundingClientRect”的解决方法建议，希望对你解决无法在 Angular 中读取 null 的属性“getBoundingClientRect”有所启发或帮助；

我正在尝试使用 <div class="bundles-wrap enterprise" 或 getBoundingClIEntRect().height 获取此 this.elementVIEw.nativeElement.offsetHeight 元素的像素高度。

这是我的 HTML：

<div class="row d-flex align-items-end" *ngFor="let value of valueList">
        <!--        start-->
          <div class="bundles-wrap enterprise" ID="card-ID" #card>
            <div class="hdr">
              <h2>{{value.namE}}</h2>
              <span>what you’ll get</span>
            </div>
</div>
</div>

这是我的组件类：

 valueList: Model[];
 @VIEwChild('card',{read: ElementRef,static:falsE}) elementVIEw: ElementRef;
    ngAfterVIEwInit(): voID{
     this.loaderservice.showLoader("sHell-content-loader","Processing…");
     this.getValueList();
    
    }
    
    getValueList(){
    this.service.getvalueDetails().subscribe(res => {
           this.valueList = res;
              if (this.valueList.length != 0) {
                this.loaderservice.hIDeLoader("sHell-content-loader");
                const height1 = document.getElementByID('card-ID').getBoundingClIEntRect().height;
                const height2 = this.elementVIEw.nativeElement.offsetHeight;
                console.log(height1);
              }
            });
        
        }

我正在尝试获取 height1,height2，但它显示 CAnnot read property 'getBoundingClIEntRect' of null in Angular。没有任何作用。

@H_696_0@解决方法

您正在尝试获取 ID 为 //<<< Over here!!! 的元素。

您还在 class BookRepository: ObservabLeobject { @Published private(set) var books = [Book]() private var listener: ListenerRegistration? func add(_ book: Book,completion: @escaping (Error?) -> Void) { let _ = try! db.collection(.books).addDocument(from: book) { error in if error == nil { self.books.append(book) } //<<< (1) Over here!!! Might get called at the same time as (2) completion(error) } } func get(query: Query,completion: @escaping (BookError?) -> Void) { // Storing listener to single property so multiple calls to get(query:completion:) won't create multiple listeners listener = query.addSnapshotListener { snapshot,error in var err: BookError? // Make sure no network errors guard error != nil else { completion(.networkError); return } precondition(snapshot != nil,"If there's no error snapshot must exist") // Convert documents to Book instances let documents = snapshot!.documents let books = documents.compactMap { try? $0.data(as: Book.self) } // check if all documents were successfully decoded and if I didn't try to access an empty collection if Documents.count != books.count || documents.isEmpty { err = documents.isEmpty ? .emptyQuery : .incorrectBookData(self.getBadData(documents,books)) // Retrieves ID's of documents which weren't decoded into Books } // Assign books to the @Published property to update UI self.books = books //<<< (2) Over here!!! Might get called at the same time as (1) // Call completion handler completion(err) } } enum BookError: Error { case networkError case emptyQuery case incorrectBookData([String]) } func getBadData(_ docs: [QueryDocumentSnapshot],_ books: [Book]) -> [String] { //... } } 中使用此 ID 创建元素，因此多个元素将具有相同的 ID。

在您的代码中，您设置将在 ngFor 中使用的值，并在搜索元素后立即使用。因此，Angular 将找不到元素，因为它们尚未加载。

我建议您以不同的方式识别所有元素。你可以用特定的 CSS class 来做，或者像这样：

card-id

在有角的一侧：

*ngFor

您可以将每个步骤的索引附加到您的 id:

<div class="row d-flex align-items-end" *ngFor="let value of valueList; let i = index">
          <div class="bundles-wrap enterprise" [attr.id]="'card-id' + i" #card>
            <div class="hdr">
              <h2>{{value.NamE}}</h2>
              <span>what you’ll get</span>
            </div>
          </div>
</div>

在你的组件中：

this.service.getvalueDetails().subscribe(res => {
            this.valueList = res;
            if (this.valueList.length != 0) {
                this.loaderservice.hideLoader("sHell-content-loader");

                for (var i = 0; i < res.length; i++)  {
                    const height1 = document.getElementById('card-id' + i).getBoundingClientRect().height;
                    const height2 = this.elementView.nativeElement.offsetHeight;
                    console.log(height1);
                }
            }
        });