模板解析错误：绑定属性（Angular，Carbon）

Question

我正在关注Carbon Design System Angular Tutorial。我正在尝试增加教程中实现的存储库页面。我的目标是使用'with toolbar' from table angular stories。

我遇到了关于 ibm-table-toolbar 和 ibm-overflow-menu 的这些运行时属性的绑定错误。见下图：

repositories.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { RepositoriesRoutingModule } from './repositories-routing.module';
import { RepoPageComponent } from './repo-page/repo-page.component';
import {
    GridModule,
    TableModule,
    SearchModule,
    LinkModule,
    PaginationModule,
    PanelModule,
    ToggleModule,
    ButtonModule,
    DialogModule,
    NFormsModule
} from 'carbon-components-angular';

import {
    SettingsModule,
    DeleteModule,
    FilterModule,
    SaveModule,
    DownloadModule,
    AddModule
} from '@carbon/icons-angular';

import { RepoTableComponent } from './repo-table/repo-table.component';
// import { Button } from 'protractor';


@NgModule({
    declarations: [RepoPageComponent, RepoTableComponent],
    imports: [
        CommonModule,
        RepositoriesRoutingModule,
        GridModule,
        TableModule,
        LinkModule,
        PaginationModule,
        PanelModule,
        ToggleModule,
        ButtonModule,
        SettingsModule,
        DeleteModule,
        FilterModule,
        SaveModule,
        DownloadModule,
        AddModule,
        SearchModule,
        FormsModule,
        DialogModule,
        NFormsModule
    ]
})
export class RepositoriesModule { }

repo-table.component.html

<ibm-table-container>
    <ibm-table-header>
        <h4 ibmTableHeaderTitle>Carbon Repositories</h4>
        <p ibmTableHeaderDescription>A collection of public Carbon repositories.</p>
    </ibm-table-header>
    <ibm-table-toolbar [model]="model" [batchText]="null" [size]="md" (cancel)="cancelMethod()" #toolbar>
        <ibm-table-toolbar-actions>
            <button ibmButton="primary" [tabindex]="toolbar.selected ? 0 : -1">
                Delete
                <ibm-icon-delete size="16" class="bx--btn__icon"></ibm-icon-delete>
            </button>
            <button ibmButton="primary" [tabindex]="toolbar.selected ? 0 : -1">
                Save
                <ibm-icon-save size="16" class="bx--btn__icon"></ibm-icon-save>
            </button>
            <button ibmButton="primary" [tabindex]="toolbar.selected ? 0 : -1">
                Download
                <ibm-icon-download size="16" class="bx--btn__icon"></ibm-icon-download>
            </button>
        </ibm-table-toolbar-actions>
        <ibm-table-toolbar-content *ngIf="!toolbar.selected">
            <ibm-table-toolbar-search ngDefaultControl [expandable]="true" [(ngModel)]="searchModel">
            </ibm-table-toolbar-search>
            <ibm-overflow-menu triggerClass="bx--toolbar-action" [customTrigger]="customTrigger" placement="bottom"
                [offset]="size === 'sm' ? null : offset">
                <ibm-overflow-menu-option>Option 1</ibm-overflow-menu-option>
                <ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>
                <ibm-overflow-menu-option disabled="true">Disabled</ibm-overflow-menu-option>
                <ibm-overflow-menu-option type="danger">Danger option</ibm-overflow-menu-option>
            </ibm-overflow-menu>
            <button ibmButton="primary" size="sm" [tabindex]="toolbar.selected ? -1 : 0">
                Primary button<ibm-icon-add size="20" class="bx--btn__icon"></ibm-icon-add>
            </button>
        </ibm-table-toolbar-content>
    </ibm-table-toolbar>
    <ibm-table [skeleton]="skeleton" [model]="skeleton ? skeletonModel : model" [showSelectionColumn]="true">
    </ibm-table>
    <ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination>
</ibm-table-container>

<ng-template #linkTemplate let-data="data">
    <ul style="display: flex">
        <li>
            <a ibmLink [href]="data.github">Github</a>
        </li>
        <li *ngIf="data.homepage">
            <span>&nbsp;|&nbsp;</span>
            <a ibmLink [href]="data.homepage">HomePage</a>
        </li>
    </ul>
</ng-template>

<ibm-panel [expanded]="showSidePanel">
    <ibm-toggle [label]="Teste" [checked]="showSidePanel" (change)="toggleSideBarVisibility()">
    </ibm-toggle>
</ibm-panel>

repo-table.component.ts

import {
    Component,
    OnInit,
    ViewChild,
    TemplateRef
} from '@angular/core';

import {
    Table,
    TableModel,
    TableItem,
    TableHeaderItem,
} from 'carbon-components-angular';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';

@Component({
    selector: 'app-repo-table',
    templateUrl: './repo-table.component.html',
    styleUrls: ['./repo-table.component.scss']
})
export class RepoTableComponent implements OnInit {
    data = [];
    model: TableModel;
    skeletonModel = Table.skeletonModel(10, 6);
    skeleton = true;
    showSidePanel = false;
    searchModel = '';
    batchText = {
        "SINGLE": "1 item selected",
        "MULTIPLE": "{{count}} items selected"
      };
    size = 'md';

    @ViewChild('linkTemplate', null)
    protected linkTemplate: TemplateRef<any>;

    constructor(private apollo: Apollo) { }

    ngOnInit() {
        this.model = new TableModel();
        this.model.header = [
            new TableHeaderItem({data: 'Name'}),
            new TableHeaderItem({data: 'Created'}),
            new TableHeaderItem({data: 'Updated'}),
            new TableHeaderItem({data: 'Open Issues'}),
            new TableHeaderItem({data: 'Stars'}),
            new TableHeaderItem({data: 'Links'})
        ];

        this.apollo.watchQuery({
            query: gql`
              query REPO_QUERY {
                # Let's use carbon as our organization
                organization(login: "carbon-design-system") {
                  # We'll grab all the repositories in one go. To load more resources
                  # continuously, see the advanced topics.
                  repositories(first: 75, orderBy: { field: UPDATED_AT, direction: DESC }) {
                    totalCount
                    nodes {
                      url
                      homepageUrl
                      issues(filterBy: { states: OPEN }) {
                        totalCount
                      }
                      stargazers {
                        totalCount
                      }
                      releases(first: 1) {
                        totalCount
                        nodes {
                          name
                        }
                      }
                      name
                      updatedAt
                      createdAt
                      description
                      id
                    }
                  }
                }
              }
            `
        })
        .valueChanges.subscribe((response: any) => {
            if (response.error) {
                const errorData = [];
                errorData.push([
                    new TableItem({data: 'error!' })
                ]);
                this.model.data = errorData;
            } else if (response.loading) {
                this.skeleton = true;
            } else {
                // If we're here, we've got our data!
                this.data = response.data.organization.repositories.nodes;
                this.model.pageLength = 10;
                this.model.totalDataLength = response.data.organization.repositories.totalCount;
                this.selectPage(1);
            }
        });
    }

    selectPage(page) {
        const offset = this.model.pageLength * (page - 1);
        const pageRawData = this.data.slice(offset, offset + this.model.pageLength);
        this.model.data = this.prepareData(pageRawData);
        this.model.currentPage = page;
    }

    prepareData(data) {
        this.skeleton = false;
        const newData = [];

        for (const datum of data) {
            newData.push([
                new TableItem({ data: datum.name/* , expandedData: datum.description  */}),
                new TableItem({ data: new Date(datum.createdAt).toLocaleDateString() }),
                new TableItem({ data: new Date(datum.updatedAt).toLocaleDateString() }),
                new TableItem({ data: datum.issues.totalCount }),
                new TableItem({ data: datum.stargazers.totalCount }),
                new TableItem({
                    data: {
                        github: datum.url,
                        homepage: datum.homepageUrl
                    },
                    template: this.linkTemplate
                })
            ]);
        }
        return newData;
    }

    toggleSideBarVisibility() {
        this.showSidePanel = !this.showSidePanel;
    }
}

我的分支repo 的教程尝试实现增量。

我试图了解我做错了什么。我认为是关于进口和申报......我真的迷失了这些。

---

这是我在 VSCode 上看到的，在安装了一些 Angular 插件之后。

此外，IntelliSense 建议这样做：

无法绑定到“size”，因为它不是“ibm-table-toolbar”的已知属性。

1. 如果 'ibm-table-toolbar' 是一个 Angular 组件并且它有 'size' 输入，> 然后验证它是这个模块的一部分。
2. 如果“ibm-table-toolbar”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。
3. 要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。

Answer 1

在用自己的头砸键盘几天之后。我终于有所了解，并决定进一步调查有问题的组件的代码（在我的本地节点模块上）。当然，这些属性不是预期的，因为我安装的版本。所以最后只需要更新碳角组件的依赖关系。