組件上的@input 給出錯誤：類型上不存在屬性“showingSingle”

Question

所以我有一個 angular 8 應用程序。

我在組件 DossierCorrespondenceComponent 中有這個：

  @Input() showingSingle = false;

這樣我就可以在其他組件（DossierCorrespondenceListComponent）中使用它。 但如果我這樣做：

<div *ngIf="!showingSingle && correspondenceEntries && correspondenceEntries.length > 0;">

然后我會得到這個錯誤：

Property 'showingSingle' does not exist on type 'DossierCorrespondenceListComponent'.

那么如何解決這個問題呢？

謝謝

html：

<div *ngIf="!showingSingle  && correspondenceEntries && correspondenceEntries.length > 0;">
  <div class="main-row main-row-dossier">
    <section class="data-entry">
      <h3 class="dossier-header">Algemeen</h3>
      <table class="dossier-table">
        <thead class="dossier-tableheader">
          <tr>
            <th class="dossier-tablehead fixed-one-fifth">Datum</th>
            <th class="dossier-tablehead fixed-four-fifths">Onderwerp</th>
          </tr>
        </thead>
        <tbody class="dossier-tablebody">
          <tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)">
            <td>{{ entry.date | date:"dd-MM-y" }}</td>
            <td>{{ entry.name }}</td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</div>

js：

export class DossierCorrespondenceListComponent implements OnInit {

  correspondenceEntries: DossierEntry[];

  constructor() { }

  ngOnInit() {
  }

js：

export class DossierCorrespondenceComponent implements OnInit {

  @Input()
  allCorrespondence: Array<DossierEntry>;
  @Input()
  correspondenceEntries: Array<DossierEntry>;
  @Input()
  attachmentEntries: Array<DossierEntry>;
 /*  allCorrespondence$: Observable<DossierEntry>;
  correspondenceEntries$: Observable<DossierEntry>;
  attachmentEntries$: Observable<DossierEntry>; */
  message = '';
  emptyMessageCorrespondentie = 'Geen correspondentie.';
  errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;

  @Input() showingSingle = false;

  single: DossierEntry;

  constructor(
    private healthAPIService: HealthAPIService,
    private prevRouterService: PreviousRouteService,
    private dossierService: DossierService
  ) {}

  ngOnInit() {
    this.healthAPIService.getDossierEntry('correspondence').subscribe(result => {
      this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
    }, msg => (this.message = this.errorMessageConnection));
  }

  handleCorrespondenceLoad(result) {
    if (result.length === 0) {
      this.message = this.emptyMessageCorrespondentie;
      return;
    }
    this.allCorrespondence = result;
    this.attachmentEntries = [];
    this.correspondenceEntries = [];

    const groups = _.groupBy(result, 'type');
    groups.correspondence.push(result);
    groups.attachments.push(result);

  }

  gotoItem(index, type: string) {
    this.showingSingle = true;

    /*    _.mapValues(type, function(group, key) {
      return type === 'correspondence' ? _.groupBy(group, 'attachments') : group;
}); */

    const groupData = _.groupBy(type, item => {
      return _.get(item, 'correspondence', 'attachments');
    });

    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }
    this.showingSingle = true;
  }

  goBack(event) {
    this.showingSingle = false;
  }
}

你在這里的意思是：

<tbody class="dossier-tablebody">
          <tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)">
            <td>{{ entry.date | date:"dd-MM-y" }}</td>
            <td>{{ entry.name }}</td>
          </tr>
        </tbody>

所以這是 DossierCorospondenceComponent 的 html：

<app [noTopBar]="true">
  <h2 class="dossier-page-header">Correspondentie</h2>

  <p class="data-entry" *ngIf="!allCorrespondence">{{ message }}</p>

  <app-is-loading *ngIf="!correspondenceLoaded" message="Correspondentie wordt geladen"></app-is-loading>


  <app-dossier-correspondence-list ></app-dossier-correspondence-list>

  <app-dossier-correspondence-item
    [item]="single"
    (goBack)="goBack($event)"
    *ngIf="showingSingle">
  </app-dossier-correspondence-item>
</app>

所以我有這樣的：

export class DossierCorrespondenceListComponent implements OnInit {

  correspondenceEntries: DossierEntry[];

  @Input() showingSingle = false;  

  constructor() { }

  ngOnInit() {
  }

但我必須在這里輸入：

export class DossierCorrespondenceComponent implements OnInit {

  @Input()
  allCorrespondence: Array<DossierEntry>;
  @Input()
  correspondenceEntries: Array<DossierEntry>;
  @Input()
  attachmentEntries: Array<DossierEntry>;
 /*  allCorrespondence$: Observable<DossierEntry>;
  correspondenceEntries$: Observable<DossierEntry>;
  attachmentEntries$: Observable<DossierEntry>; */
  message = '';
  emptyMessageCorrespondentie = 'Geen correspondentie.';
  errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;

  @Input() showingSingle = false;

  single: DossierEntry;

  constructor(
    private healthAPIService: HealthAPIService,
    private prevRouterService: PreviousRouteService,
    private dossierService: DossierService
  ) {}

因為現在是雙重屬性

Answer 1

你可以看到它說清楚， showingSingle不存在DossierCorrespondenceListComponent ，你需要聲明它里面DossierCorrespondenceListComponent使用它。

如果可以，請向我們展示您的DossierCorrespondenceListComponent和DossierCorrespondenceComponent代碼，看看您想要實現的更好。

您可以查看 Angular Input 的文檔以獲取更多關於如何操作Angular Input 的信息

更新 1

簡而言之：DCLC => DossierCorrespondenceListComponent和 DCC for DossierCorrespondenceComponent

我看到你想顯示一個 DCC 組件的列表，屬性showingSingle需要繞過一個來自 DCLC 的值。

在你的ngFor循環中，像這樣將showingSingle添加到循環中

<div *ngFor="let c of list">
  <DCC [showingSingle]="c"></DCC>
</div>

旁注：您應該使用英語而不是法語作為組件的名稱，並且您正在與德國人合作