您如何在 *ngfor中的垫子选择中设置默认值

发布于 2025-02-09 06:44:51 字数 541 浏览 1 评论 0原文

我正在尝试在 *ngfor中设置一个默认值，但是，从环路中访问数组中的元素无法正常工作。这种方法有类似的方法吗？

.ts文件：

persons: Person[] = .. //consist of Person with name and age

.html文件：

<div *ngFor="let person of persons">
    {{ person.name }}
    <mat-form-field>
    <mat-select [(value)]="person.age">
         <mat-option value="10-20">10-20</mat-option>
         <mat-option value="20-30">20-30</mat-option>
    </mat-select>
    </mat-form-field>
</div>

原文

I am trying to set a default value in mat-select within an *ngFor, however, accessing the element in the array from the loop is not working as wanted. Is there any similar way to this approach?

.ts file:

persons: Person[] = .. //consist of Person with name and age

.html file:

<div *ngFor="let person of persons">
    {{ person.name }}
    <mat-form-field>
    <mat-select [(value)]="person.age">
         <mat-option value="10-20">10-20</mat-option>
         <mat-option value="20-30">20-30</mat-option>
    </mat-select>
    </mat-form-field>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦冥 2025-02-16 06:44:51

要设置默认值，您需要使用分配给每个对象的age属性的值填充数组。然后MAT-SELECT [（value）]绑定可以将匹配值设置为默认值。

示例（ stackblitz demo ）：

export class AppComponent {
  persons = [
    {
      name: 'John Smith',
      age: '30-40'
    },
    {
      name: 'Patrick Stewart',
      age: '10-20'
    }
    ,
    {
      name: 'Peter Parker',
      age: '20-30'
    }
  ]
}

如果您的数组是动态的，则可以运行一个循环以将默认值分配给每个元素。

ngOnInit() {
  this.persons.forEach(item => item.age = '10-20'); // set the default age you want

}

html：

<div *ngFor="let person of persons">
  {{ person.name }}
  <mat-form-field>
    <mat-select [(value)]="person.age">
      <mat-option value="10-20">10-20</mat-option>
      <mat-option value="20-30">20-30</mat-option>
      <mat-option value="30-40">30-40</mat-option>
    </mat-select>
  </mat-form-field>
</div>

结果：

To set a default value, you need to populate your array with a value assigned to each object's age property. Then mat-select [(value)] binding can set the matching value as default.

Example (Stackblitz demo):

export class AppComponent {
  persons = [
    {
      name: 'John Smith',
      age: '30-40'
    },
    {
      name: 'Patrick Stewart',
      age: '10-20'
    }
    ,
    {
      name: 'Peter Parker',
      age: '20-30'
    }
  ]
}

If your array is dynamic, you can run a loop to assign a default value to each element as well.

ngOnInit() {
  this.persons.forEach(item => item.age = '10-20'); // set the default age you want

}

html:

<div *ngFor="let person of persons">
  {{ person.name }}
  <mat-form-field>
    <mat-select [(value)]="person.age">
      <mat-option value="10-20">10-20</mat-option>
      <mat-option value="20-30">20-30</mat-option>
      <mat-option value="30-40">30-40</mat-option>
    </mat-select>
  </mat-form-field>
</div>

Result: