问题

我正在尝试使用一组评分轮次的名称填充 mat-select 列表。

这里我定义了评分轮次是什么：

```typescript
scoring.rounds.ts
export interface ScoringRounds {
    id: number; 
    name: string;
    arrowsPerEnd: number;
    numberOfEnds: number;
    distanceOne: string;
    endsOne: number;
    faceOne: string;
    distanceTwo?: string;
    endsTwo?: number;
    faceTwo?: string;
    distanceThree?: string;
    endsThree?: number;
    faceThree?: string;
    distanceFour?: string;
    endsFour?: number;
    faceFour?: string;
    scoreType: string;
}

这里我提供了一个用于检索轮次列表的服务：

scoring-rounds.service.ts

import { Injectable } from '@angular/core';
import { ScoringRounds } from './scoring.rounds';

@Injectable({
  providedIn: 'root'
})
export class ScoringRoundsService {

  protected scoringRoundsList: ScoringRounds[] = [
    {id: 1, name: 'WA50', arrowsPerEnd: 6, numberOfEnds: 12, 
    distanceOne: '50m', endsOne: 12, faceOne: '122cm',
    scoreType: 'Metric 10 Zone'},
    {id: 2, name: 'WA1440', arrowsPerEnd: 6, numberOfEnds: 24, 
    distanceOne: '90m', endsOne: 6, faceOne: '122cm', 
    distanceTwo: '70m', endsTwo: 6, faceTwo: '122cm', 
    distanceThree: '50m', endsThree: 6, faceThree: '80cm',
    distanceFour: '30m', endsFour: 6, faceFour: '80cm',
    scoreType: 'Metric 10 Zone'}
  ]

  getAllScoringRoundNames(): string[] {
    return this.scoringRoundsList.map(round => round.name);
  }
}

当尝试将 .name 添加到返回语句中，或者在 HTML 中尝试将其用作 mat-select 的值时，我收到以下错误：

[{
>>"resource": "/c:/TM470/target-club/src/app/add-scores/add-scores.component.html",
"owner": "generated_diagnostic_collection_name#0",
"code": "2339",
"severity": 8,
"message": "Property 'name' does not exist on type 'ScoringRounds[]'.",
"source": "ngtsc",
"startLineNumber": 20,
"startColumn": 88,
"endLineNumber": 20,
"endColumn": 92,
"relatedInformation": [
{
"startLineNumber": 19,
"startColumn": 8,
"endLineNumber": 19,
"endColumn": 37,
"message": "Error occurs in the template of component AddScoresComponent.",
"resource": "/c:/TM470/target-club/src/app/add-scores/add-scores.component.ts"
}
]
}]

我尝试了多种方法，但无法理解为什么它说属性不存在，当我在 scoring.rounds.ts 中明确定义了它。

<details>
<summary>英文:</summary>

I am trying to populate a mat-select list with the names of a set of scoring rounds. 

Here I define what a scoring round is: 

scoring.rounds.ts
export interface ScoringRounds {
id: number;
name: string;
arrowsPerEnd: number;
numberOfEnds: number;
distanceOne: string;
endsOne: number;
faceOne: string;
distanceTwo?: string;
endsTwo?: number;
faceTwo?: string;
distanceThree?: string;
endsThree?: number;
faceThree?: string;
distanceFour?: string;
endsFour?: number;
faceFour?: string;
scoreType: string;
}

Here I provide a service to retrieve the list of rounds:

scoring-rounds.service.ts

import { Injectable } from '@angular/core';
import { ScoringRounds } from './scoring.rounds';

@Injectable({
providedIn: 'root'
})
export class ScoringRoundsService {

protected scoringRoundsList: ScoringRounds[] = [
{id: 1, name: 'WA50', arrowsPerEnd: 6, numberOfEnds: 12,
distanceOne: '50m', endsOne: 12, faceOne: '122cm',
scoreType: 'Metric 10 Zone'},
{id: 2, name: 'WA1440', arrowsPerEnd: 6, numberOfEnds: 24,
distanceOne: '90m', endsOne: 6, faceOne: '122cm',
distanceTwo: '70m', endsTwo: 6, faceTwo: '122cm',
distanceThree: '50m', endsThree: 6, faceThree: '80cm',
distanceFour: '30m', endsFour: 6, faceFour: '80cm',
scoreType: 'Metric 10 Zone'}

]

getAllScoringRoundNames(): ScoringRounds[] {
return this.scoringRoundsList.name;
}

}

and I receive the following error when adding .name to the return, or when trying to use it in the html to provide the values for mat-select. 



>[{
	>>"resource": "/c:/TM470/target-club/src/app/add-scores/add-scores.component.html",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "2339",
	"severity": 8,
	"message": "Property 'name' does not exist on type 'ScoringRounds[]'.",
	"source": "ngtsc",
	"startLineNumber": 20,
	"startColumn": 88,
	"endLineNumber": 20,
	"endColumn": 92,
	"relatedInformation": [
		{
			"startLineNumber": 19,
			"startColumn": 8,
			"endLineNumber": 19,
			"endColumn": 37,
			"message": "Error occurs in the template of component AddScoresComponent.",
			"resource": "/c:/TM470/target-club/src/app/add-scores/add-scores.component.ts"
		}
	]
}]

I have tried multiple methods but cannot understand why this is saying the property does not exist, when I have explicitly defined it in scoring.rounds.ts

</details>


# 答案1
**得分**: 0

`this.scoringRoundsList` 是一个包含 `ScoringRounds` 的数组，但它们没有 `name` 属性。如果你想获取所有 `scoringRounds` 的 `name`，可以尝试以下代码：

```typescript
getAllScoringRoundNames(): string[] {
  return this.scoringRoundsList.map(round => round.name);
}

在你的表单中，使用下面的标记。请注意：

• 我将轮次的 name 绑定为每个 mat-option 的 value - 这将使得点击时选择这个轮次，而不是整个数组
• 也将其添加到 mat-option 组件内部 - 这会在下拉菜单中显示名称

<mat-form-field>
  <mat-label>轮次名称</mat-label>
  <mat-select formControlName="roundName" [(ngModel)]="scoringRoundsList">
    <mat-option *ngFor="let round of scoringRoundsList" [value]="round.name">
      {{round.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

如果你有进一步的问题，请参考Angular Material文档。

getAllScoringRoundNames(): string[] {
  return this.scoringRoundsList.map(round => round.name);
}

<mat-form-field>
  <mat-label>Round Name</mat-label>
  <mat-select formControlName="roundName" [(ngModel)]="scoringRoundsList">
    <mat-option *ngFor="let round of scoringRoundsList" [value]="round.name">
      {{round.name}}
    </mat-option>
  </mat-select>
</mat-form-field>