core.mjs:6484 错误 TypeError：无法读取未定义的属性（读取 \'name\'）

Question

在 console.log 中，我有一条错误消息，但我无法解决这个问题......

这是错误信息

core.mjs:6484 ERROR TypeError: Cannot read properties of undefined (reading 'name')

我应该如何在下面声明name？

 ...
    <ng-container *ngIf="dta && dta.PP">
 ...

HTML

<ng-container *ngIf="dta && dta.PP  ">
  <div class="card" style="width: 60%">
    <div class="card-body">
      <div class="row">
        <div class="col">
          <table class="table table-hover table-striped spaceLeft">
            <tbody>
              <tr>
                <th>Year</th>
                <td>{{ fiscalYear }}</td>
              </tr>
              <tr>
                <th>Country</th>
                <td>{{ selectedCountry.name }}</td>
              </tr>
              <tr>
                <th>Register</th>
                <td>{{ registreNational }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</ng-container>

TS

selectedCountry: Country;

ngOnInit(): void {
    ...

    this.service.getPaysDta().pipe(
        takeUntil(this.unsubscribe$)
    ).subscribe((countries) => {
        this.countries = countries;

        let selectedCountry = this.countries.find(c => c.id == this.country);
        if (selectedCountry) {
            this.selectedCountry = selectedCountry;
        }
    });

}

国家.ts

export class Country {
    id : string;
    name: string;

}

我不知道如何正确声明变量name...：S

谢谢您的帮助。

Answer 1

selectedCountry 默认是未定义的，它只会在异步的getPaysDta() 订阅回调中被赋值。

在 HTML 中，您将字符串插入 {{ selectedCountry.name }}。最初它将尝试访问 undefined 的 name 属性，因此出现错误消息。

您可以通过使用 *ngIf 包装字符串插值来非常轻松地解决此问题。

例子：

<td>
<span *ngIf="selectedCountry">{{ selectedCountry.name }}</span>
</td>

Answer 2

非常感谢！它也对我有用