angular で選択されたセレクトボックスの行を取得したい。

Question

前提・実現したいこと

angular で選択されたセレクトボックスの値を取得したい。

現在、angularでテーブルの一番上に*ngForでセレクトボックスを表示し数あるテーブルの中から社名と電話番号の行を選択するというものを作っております。

該当のソースコード

どうしても、どの行で電話番号、社名が選択されていているかをコンポーネント側に渡すことができません。
以下がソースになります。
※テーブルの数や社名などの配置は固定ではありません。その時々で増えたり、減ったりします。

top.component.html

  <table *ngIf="tableData">

    <tr>
    <ng-container *ngFor="let row of tableData; index as i"> 
    <td *ngIf="i<nagasa"><select id="department" placeholder="選択してください。">
            <option *ngFor="let labels of label" [value]="labels">
                 {{labels}}</option>
          </select></td>
    </ng-container>   
    </tr>

    <tr>
    <ng-container *ngFor="let row of tableData; index as i"> 
    <td *ngIf="i<nagasa">{{tableData[0][i]}}</td>
    </ng-container>   
    </tr>

    <tr>
    <ng-container *ngFor="let row of tableData; index as i"> 
    <td *ngIf="i<nagasa">{{tableData[1][i]}}</td>
    </ng-container>  
    </tr>

    <tr>
    <ng-container *ngFor="let row of tableData; index as i"> 
    <td *ngIf="i<nagasa">{{tableData[2][i]}}</td>
    </ng-container>  
    </tr>

    <tr>
    <ng-container *ngFor="let row of tableData; index as i"> 
    <td *ngIf="i<nagasa">{{tableData[3][i]}}</td>
    </ng-container>  
    </tr>

    <tr>
    <ng-container *ngFor="let row of tableData; index as i"> 
    <td *ngIf="i<nagasa">{{tableData[4][i]}}</td>
    </ng-container>  
    </tr>

  </table>
    

top.component.ts

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

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.scss']
})
export class TopComponent implements OnInit {
  title: string = "Hello World";
  public label: string[] =[
    '選択してください。','社名', '電話番号'
  ];
  public nagasa: number = 7; 
  public tableData: string[][] = [[ '株式会社サンプル','代表太郎','2人','東京','090-0000-0000'],
  [ '株式会社サンプル1','代表太郎1','3人','埼玉','080-0000-0000'], [ '株式会社サンプル2','代表太郎2','10人','千葉','070-0000-0000'],
  [ '株式会社サンプル3','代表太郎3','11人','栃木','060-0000-0000'],[ '株式会社サンプル4','代表太郎4','15人','群馬','050-0000-0000'],
  [ '株式会社サンプル5','代表太郎5','１人','新潟','040-0000-0000']]

  constructor() {}
  ngOnInit() {}

}

試したこと

selectboxのnameから行を取得できないかと試みますが、ダメでした。

補足情報（FW/ツールのバージョンなど）

angularは7.1.0を使っております。

宜しくお願いします。

Answer 1

selectタグにchangeハンドラを設定する方法があります。

<ng-container *ngFor="let row of tableData; index as i"> 
    <td *ngIf="i<nagasa"><select id="department" placeholder="選択してください。"
           (change)=onChangeSelect($event.target.value)>
            <option *ngFor="let labels of label" [value]="labels">
                 {{labels}}</option>
          </select></td>
    </ng-container> 

public selectValue;

  onChangeSelect(value){
    this.selectValue=value;
    console.log("value is "+this.selectValue);
  }

Comments

[ayase06]

無事にできました。ありがとうございます。引き続き宜しくお願いします。