如何处理这个复选框？

Question

如果我的数据库中的数据匹配，我目前正在尝试“检查”复选框中的值。我的问题是我的数据库输出是这样的数组：

(console.log)
[{…}]
0:
fachbetreuung:
betreuer: "DMC\\bianca.nemitz"
bezeichnung: "SCM" //thats the value i need
fachbetreuungId: "72415569-6599-4bf2-a82b-a4124a610f75"
fachbetreuungPersonenzuordnungens: []

所以我需要名为“bezeichnung”的值。我现在的问题是我需要读取这个数组的每个元素，然后在我的复选框中设置值，如下所示：

this.fachBetreuerType[0].fachbetreuung.bezeichnung

我试图这样达到它：

<mat-checkbox *ngFor="let bezeichnung of betreuerOverview" 
                        [checked]="fachBetreuerType.fachbetreuung.bezeichnung"> <!-- This is the one-->
                        {{bezeichnung.bezeichnung}}
</mat-checkbox>

但如果我这样尝试，角度无法达到数组的值并记录我“无法读取未定义的属性（读取'bezeichnung'）”。我正在考虑将 for 循环作为解决方案，但我不知道我可以将它放在哪里？我认为进入“检查”没有意义。

//编辑：

this.route.params.subscribe(params => {
      const id = params['id'];
      this.fService
      .getFachInfos(id)
      .subscribe(data => { this.fachBetreuerType = data; console.log(this.fachBetreuerType);
      })}
    )

getFachInfos(fachId:number){
    return this.http.get<FachbetreuungZuordnungSharing[]>(this.fBZ + fachId);
  }

内容图片：

https://ibb.co/xGWtLVs

Answer 1

数据是异步获取的，因此您需要在数据仍然不存在时防止错误。您可以尝试这样做：

<mat-checkbox
  *ngFor="let bezeichnung of betreuerOverview"
  [checked]="fachBetreuerType?.length && fachBetreuerType[0].fachbetreuung.bezeichnung">
  {{ bezeichnung.bezeichnung }}
</mat-checkbox>

这将检查您的复选框是否有bezeichnung 具有的任何truthy 值，这可能不是您想要的。您应该添加进一步检查以确保根据您的业务逻辑检查复选框。

例如：

[checked]="fachBetreuerType?.length && fachBetreuerType[0].fachbetreuung.bezeichnung === 'SCM'"

Answer 2

由于您的数据来自 API，这意味着当您尝试联系“bezeichnung”或“fachBetreuerType”时，尚未加载数据。

根据问题来源解决问题的选项：

1- 如果问题来自“betreuerOverview”，你可以使用 *ngIf 语句，但你不能在你放 *ngFor 的地方使用它。你必须用：

<ng-container *ngIf="betreuerOverview.length">
  <mat-checkbox *ngFor="let bezeichnung of betreuerOverview" 
                    [checked]="fachBetreuerType.fachbetreuung.bezeichnung"> <!-- This is the one-->
                    {{bezeichnung.bezeichnung}}
  </mat-checkbox>
</ng-container>

更优雅的方法是简单地用“[]”初始化“betreuerOverview”，这样它就不会迭代它，直到其中有数据，并且您不必使用 *ngIf 条件结构。

2- 如果问题来自“fachBetreuerType”为空，则应在 ngIf 语句中测试“fachBetreuerType”值

<ng-container *ngIf="fachBetreuerType?.length">
  <mat-checkbox *ngFor="let bezeichnung of betreuerOverview" 
                [checked]="fachBetreuerType.fachbetreuung.bezeichnung"> <!-- This is the one-->
                {{bezeichnung.bezeichnung}}
  </mat-checkbox>
</ng-container>

关于 ngIf 语句中的测试：它可以替换为更详细的测试：例如，“fachBetreuerType && fachBetreuerType.length > 0”，取决于您的编码风格。

希望它能解决你的问题。