javascript - 找不到服务中的 Angular 7 类

Question

我做了一个模拟来在表格中显示列表。但是我得到了错误

Property 'getRepoIssues' does not exist on type 'GithubIssue'.

但我已经先声明了。我提供了一些代码和 link供你引用。对于 HTML 我放了完整的代码

HTML

<table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows class="mat-elevation-z8-">
<ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }">
    <!-- -->
    <ng-container *ngIf="column === 'select'; else notSelect">
        <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
            </mat-checkbox>
        </td>
    </ng-container>

    <ng-container *ngIf="column.length == 11" matColumnDef="created_at">
        <th mat-header-cell *matHeaderCellDef mat-sort-header><strong>{{ column }}</strong></th>
    </ng-container>
    <ng-container #headerSort>
        <th mat-header-cell *matHeaderCellDef><strong>{{ column }}</strong></th>
    </ng-container>

    <td mat-cell *matCellDef="let element; let i = index" (click)="open(element)" class="pointer">
        <p>
            {{ element.created_at}}

        </p>
        <p>
            {{element.state}}
        </p>
        <p>
            {{element.number}}
        </p>
        <p>
            {{element.title}}
        </p>

    </td>

</ng-container>

<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay" class="example-element-row" [class.example-expanded-row]="expandedElement === element"></tr>
<tr mat-row *matRowDef="let item; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
<pagination-controls (pageChange)="loadAgents($event)" id="server"></pagination-controls>

组件

data: any = [];
selectedRowIds: string;
element: string;
columnsToDisplay: string[] = ['created', 'state', 'number', 'title'];

selection = new SelectionModel <GithubIssue> (true, []);
displayedColumns: string[] = ['created_at', 'number', 'state', 'title'];
private dataSource: MatTableDataSource <GithubIssue>;
p: number = 1;
total: number;
loading: boolean;
marked = false;

constructor(
    private GithubIssue: GithubIssue,
    private dialog: MatDialog) {}


isAllSelected() {
    const numSelected = this.selection.selected.length;
    const idSelected = this.selection.selected;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
}

masterToggle() {
    if (this.isAllSelected()) {
        this.selection.clear();
        // this.isButtonEnable = true;
        this.marked = false;
    } else {
        this.dataSource.data.forEach(row => this.selection.select(row));
        // this.isButtonEnable = false;
        this.marked = true
    }
}

ngOnInit() {
    this.getPage(1);
}

getPage(page: number) {
    this.GithubIssue.getRepoIssues(page).subscribe(res => {
        console.log("TEST PAGE" + page)
        this.dataSource = new MatTableDataSource < GithubIssue > (res);
        console.log(this.dataSource)
    });
}

服务

    import {HttpClient} from '@angular/common/http';
    import {Component, ViewChild, AfterViewInit, OnInit} from '@angular/core';
    import {MatPaginator} from '@angular/material/paginator';
    import {MatSort} from '@angular/material/sort';
    import {merge, Observable, of as observableOf} from 'rxjs';
    import {catchError, map, startWith, switchMap} from 'rxjs/operators';

    export interface GithubApi {
      items: GithubIssue[];
      total_count: number;
    }

    export interface GithubIssue {
      created_at: string;
      number: string;
      state: string;
      title: string;
    }

    export class HttpDatabase {
      constructor(private _httpClient: HttpClient) {}

      getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
        const href = 'https://api.github.com/search/issues';
        const requestUrl =
            `${href}?q=repo:angular/components&sort=${sort}&order=${order}&page=${page + 1}`;

        return this._httpClient.get<GithubApi>(requestUrl);
      }
    }

不知道怎么解决

希望大家帮忙

提前致谢

Answer 1

GitHubIssue 只是一个接口(interface)，您需要注入(inject) HttpDatabase 而不是类似的东西

  constructor(private httpDb: HttpDatabase,
              private dialog: MatDialog){ }

然后调用你的方法

this.httpDb.getRepoIssues(yourparams...)

不要忘记将 HttpDatabase 添加到应用程序模块中的提供程序数组中，否则您将不会收到提供程序错误