为什么我无法读取未定义的属性“ firstItemIndex”？

Question

我的html中有此代码

<form [formGroup]="this.participantSearchService.searchParticipantForm"
    (ngSubmit)="this.participantSearchService.onSubmit()">

    <div class="formsTitle">
        <span style="color:#fff; font-size: 15px">{{ this.appService.title}}</span>
    </div>
    <table class="label" width="100%">
        <colgroup class="label-td" width="130">
        </colgroup>
        <colgroup width="380">
        </colgroup>
        <colgroup class="label-td" width="130">
        </colgroup>
        <colgroup width="380">
        </colgroup>
        <tbody>

            <tr>
                <td>
                    <label>جهة المشارك </label>
                </td>
                <td>
                    <select formControlName="participantLocation">
                        <option value="">الكل</option>
                        <option value="1">من داخل الدولة</option>
                        <option value="2">من خارج الدولة</option>
                    </select>

                </td>

                <td>
                    <label>نوع المشارك </label>
                </td>
                <td>
                    <select formControlName="participantType">
                        <option value="">الكل</option>
                        <option value="1">الشيوخ</option>
                        <option value="2">الجماعة</option>
                    </select>

                </td>
            </tr>

            <tr>
                <td>
                    <label> الاسم </label>
                </td>

                <td>
                    <input type="text" formControlName="participantName">
                </td>

                <td>
                    <label> الجنسية </label>
                </td>

                <td>
                    <select formControlName="participantNationality">
                        <option value="">الكل</option>
                        <option value="1">الإمارات</option>
                        <option value="2">السعودية</option>
                        <option value="3">سلطنة عمان</option>
                        <option value="4">البحرين</option>
                        <option value="5">الكويت</option>
                        <option value="6">قطر</option>
                        <option value="7">أخرى</option>
                    </select>

                </td>
            </tr>


            <tr>
                <td>
                    <label> جهة إصدار الهوية </label>
                </td>

                <td>
                    <select formControlName="IDCountry">
                        <option value="">الكل</option>
                        <option value="1">الإمارات</option>
                        <option value="2">السعودية</option>
                        <option value="3">سلطنة عمان</option>
                        <option value="4">البحرين</option>
                        <option value="5">الكويت</option>
                        <option value="6">قطر</option>
                        <option value="7">أخرى</option>
                    </select>

                </td>

                <td>
                    <label> مكان التسجيل </label>
                </td>

                <td>
                    <select formControlName="registrationPlace"
                        (change)="this.participantSearchService.onRegistrationPlaceIdChanged($event)">
                        <option value="">الكل</option>
                        <option value="1">الوثبة</option>
                        <option value="2">المرموم</option>
                        <option value="5">سويحان</option>
                        <option value="6">السوان</option>
                        
                    </select>

                </td>
            </tr>



            <tr>
                <td>
                    <label> رقم الهوية </label>
                </td>

                <td>
                    <input type="number" formControlName="ID">
                </td>

                <td>
                    <label> الميدان </label>
                </td>

                <td>
                    <select formControlName="center">
                        <option value="">الكل</option>
                        <option [value]="center.CenterId"
                            *ngFor="let center of this.participantSearchService.FilteredCentersList">
                            {{center.CenterName}}</option>
                    </select>
                </td>
            </tr>


            <tr>
                <td>
                    <label> الهاتف </label>
                </td>

                <td>
                    <input formControlName="phoneNo" type="number">

                </td>

                <td>
                    <label> العنوان </label>
                </td>

                <td>
                    <input formControlName="address" type="text">
                </td>
            </tr>



            <tr>
                <td>
                    <label> من تاريخ التسجيل </label>
                </td>

                <td>
                    <input formControlName="fromRegistrationDate" type="date">
                </td>

                <td>
                    <label> إلى تاريخ التسجيل </label>
                </td>

                <td>
                    <input formControlName="toRegistrationDate" type="date">
                </td>
            </tr>


            <tr>
                <td>
                    <label> من تاريخ الإنتهاء </label>
                </td>

                <td>
                    <input formControlName="fromExpiryDate" type="date">
                </td>

                <td>
                    <label> إلى تاريخ الإنتهاء </label>
                </td>

                <td>
                    <input formControlName="toExpiryDate" type="date">
                </td>
            </tr>


            <tr>

                <td>
                    <label> جهة إصدار بطاقة مشارك </label>
                </td>
                <td>
                    <select formControlName="cardCountry">
                        <option value="">الكل</option>
                        <option value="1">الإمارات</option>
                        <option value="2">السعودية</option>
                        <option value="3">سلطنة عمان</option>
                        <option value="4">البحرين</option>
                        <option value="5">الكويت</option>
                        <option value="6">قطر</option>
                        <option value="7">أخرى</option>
                    </select>
                </td>


                <td>
                    <label> رقم المشارك </label>
                </td>

                <td>
                    <input formControlName="participantNo" type="number">
                </td>

            </tr>


        </tbody>
    </table>



    <div style="text-align:right;margin:15px 15px 0px 0px">
        <button type="submit" style="width:50px;font-weight: bold;text-align: center">بحـث</button>
    </div>

    <br />




</form>
<div class="container" [hidden]="!this.participantSearchService.showParticipantSearchResult">
    <div class="row">
        <div class="col-md-6 mx-auto">
            <div class="md-form">
                <input type="text" class="form-control" [(ngModel)]="searchText" (keyup)="searchItems()"
                    id="search-input" mdbInput>
                <label for="search-input" style="direction:rtl">بحث</label>
            </div>
        </div>
        <table mdbTable #tableEl="mdbTable" stickyHeader="true" hover="true" striped="true" class="z-depth-1">
            <thead class="sticky-top">
                <tr>
                    <th *ngFor="let head of headElements; let i = index"
                        [mdbTableSort]="this.participantSearchService.ParticipantSearchResult"
                        [sortBy]="headElements[i]" scope="col">{{head | titlecase}}
                    </th>
                </tr>
            </thead>
            <tbody #row>
                <tr mdbTableCol *ngFor="let el of this.participantSearchService.ParticipantSearchResult; let i = index">
                    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                        scope="row">
                        <i class="fa fa-info-circle fa-2x"></i>
                    </td>
                    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                        {{el.participantName}}</td>
                    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                        {{el.participantType}}</td>
                    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                        {{el.participantNo}}</td>
                    <td *ngIf="i+1 >= mdbTablecPagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                        {{el.participantType}}</td>
                    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                        {{el.participantType}}</td>
                    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                        {{el.participantNationality}}</td>
                    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                        {{el.identificationNo}}</td>
                    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                        {{el.registrationPlace}}</td>
                    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                        {{el.participantNo}}</td>
                     <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                        {{el.ParticipantSearchResult}}</td>
                     <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                          {{el.ParticipantSearchResult}}</td>
                </tr>
            </tbody>

            <tfoot class="grey lighten-5 w-100">
                <tr>
                    <td colspan="9">
                        <mdb-table-pagination [tableEl]="tableEl" paginationAlign="A"
                            [searchDataSource]="this.participantSearchService.ParticipantSearchResult">
                        </mdb-table-pagination>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

和我的组件

import { Component, OnInit, AfterViewInit, ChangeDetectorRef, HostListener, ViewChild, ElementRef } from '@angular/core';
import { AppService } from 'src/app/app.service';
import { ParticipantSearchService } from './participants-search.service';
import { MdbTablePaginationComponent, MdbTableDirective } from 'angular-bootstrap-md';

@Component({
  selector: 'participants-search',
  templateUrl: './participants-search.component.html',
  styleUrls: ['./participants-search.component.css']
})
export class ParticipantsSearchComponent implements OnInit, AfterViewInit {
  @ViewChild(MdbTableDirective) mdbTable: MdbTableDirective;
  @ViewChild(MdbTablePaginationComponent) mdbTablePagination: MdbTablePaginationComponent;
  @ViewChild('row') row: ElementRef;


  headElements = ['صفحة المشاركn', 'اسم المشارك', 'رقم المشارك', 'جهة إصدار البطاقة', 'نوع المشارك', 'الجنسية', 'رقم الهوية', 'مكان التسجيل', 'تاريخ التسجيل'];

  searchText: string = '';
  previous: string;

  maxVisibleItems: number = 10;

  constructor(private appService: AppService, private participantSearchService: ParticipantSearchService,private cdRef: ChangeDetectorRef) {
    this.appService.title = "البحث عن المشاركين";
    this.appService.showMenu = true;
    this.participantSearchService.showParticipantSearchResult = false;

    

    this.participantSearchService.AttachSearchData$.subscribe(
      () => {
        this.mdbTable.setDataSource(this.participantSearchService.ParticipantSearchResult);;
        this.participantSearchService.ParticipantSearchResult = this.mdbTable.getDataSource();
        this.previous = this.mdbTable.getDataSource();
      }
    );

   }
  ngOnInit() {
    this.mdbTable.setDataSource(this.participantSearchService.ParticipantSearchResult);
    
  }


  @HostListener('input') oninput() {
    this.mdbTablePagination.searchText = this.searchText;
  }

  ngAfterViewInit() {
    var firstItemIndex = this.mdbTablePagination.firstItemIndex;
    var lastItemIndex = this.mdbTablePagination.lastItemIndex;
    console.log( this.mdbTablePagination.firstItemIndex);
    this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
    this.mdbTablePagination.calculateFirstItemIndex();
    this.mdbTablePagination.calculateLastItemIndex();
    this.cdRef.detectChanges();
  }


  searchItems() {
    const prev = this.mdbTable.getDataSource();
    console.log(prev);
    this.mdbTable.setDataSource(this.previous);
    if (!this.searchText) {
      this.mdbTable.setDataSource(this.previous);
      this.participantSearchService.ParticipantSearchResult = this.mdbTable.getDataSource();
    }

    if (this.searchText) {
      this.participantSearchService.ParticipantSearchResult = this.mdbTable.searchLocalDataBy(this.searchText);
      this.mdbTable.setDataSource(prev);
    }
    this.mdbTablePagination.calculateFirstItemIndex();
    this.mdbTablePagination.calculateLastItemIndex();

    this.mdbTable.searchDataObservable(this.searchText).subscribe(() => {
      this.mdbTablePagination.calculateFirstItemIndex();
      this.mdbTablePagination.calculateLastItemIndex();
    });

  }



}

Answer 1

这些很容易修复。将ngIf添加到tbody标签：

WITH raw_input AS (
  SELECT 'apple#' AS item
  UNION ALL
  SELECT '#banana#'   
), digits AS (
  SELECT * FROM UNNEST(SPLIT('0123456789', '')) AS digit
)

SELECT item, piece, digit
FROM raw_input
CROSS JOIN UNNEST(SPLIT(item, '#')) AS piece
LEFT JOIN digits ON piece = ''