如何遍历多个选择器答案

【问题标题】：How to iterate over multiple selectors如何遍历多个选择器
【发布时间】：2021-07-01 13:55:14
【问题描述】：

我正在创建一个表单，该表单应该能够在处理这些文件并将其导入我的数据库之前将属性分配给多个文件。在导入过程之前，我想知道文件来自哪个来源以及它们与哪个运动相关。表单在我的页面上如下所示：

如您所见，此表单上可以有多个选择器，但在我允许用户处理之前，我想检查选择器是否已正确选择，并且在我的所有研究中我找不到这样做的方法任何地方。

作为参考，我的组件和相关模板的源代码如下：

组件

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-selector-table',
  templateUrl: './selector-table.component.html',
  styleUrls: ['./selector-table.component.css'],
})
export class SelectorTableComponent implements OnInit {
  // Properties
  proceed = false;

  //Inputs
  @Input() singleSource!: boolean;
  @Input() selectedSource!: string;
  @Input() singleSport!: boolean;
  @Input() selectedSport!: string;
  @Input() fileNames!: string[];
  @Input() availableSources!: string[];
  @Input() availableSports!: string[];
  

  // Constructor
  constructor() {}

  readyToProceed() {
    this.proceed = true;
  }

  ngOnInit(){
    this.availableSources.unshift('Select Source')
    this.availableSports.unshift('Select Sport')    
  }
}

HTML 模板

<div
  style="
    margin: 8px;
    padding: 8px 5px;
    color: #333;
    width: auto;
    cursor: pointer;
    text-align: center;
  "
>
  <h2>Selector table</h2>
  <table style="margin-left: auto; margin-right: auto; min-width: 50%">
    <tr style="padding-left: 8px; text-align: left; font-weight: bolder">
      <td style="min-width: 40%">File name</td>
      <td>Source</td>
      <td>Sport</td>
    </tr>
    <tr *ngFor="let file of fileNames">
      <td style="text-align: left">{{ file }}</td>
      <td style="text-align: left">
        <div *ngIf="singleSource">
          {{ selectedSource }}
        </div>
        <div *ngIf="!singleSource">
          <select style="min-width: 10rem;" >
            <option *ngFor='let source of availableSources'>{{source}}</option>
          </select>
        </div>
      </td>
      <td style="text-align: left">
        <div *ngIf="singleSport">
          {{ selectedSport }}
        </div>
        <div *ngIf="!singleSport">
          <select style="min-width: 10rem;" >
            <option *ngFor='let sport of availableSports'>{{sport}}</option>
          </select>
        </div>
      </td>
    </tr>
  </table>
  <button style="margin-top: 20px;" (click)="readyToProceed()">Proceed</button>
</div>

任何帮助将不胜感激。

【问题讨论】：

你可以看看角形
您应该考虑使用表单和表单验证器。

标签： javascript html angular selector

【解决方案1】：

这可以通过使用表单而不是表格轻松实现。您可以根据 angular 定义的验证轻松验证表单是否有效。此外，如果您愿意，您可以选择添加自定义验证器。请参阅此链接以获取角度反应形式： https://angular.io/guide/reactive-forms

【讨论】：