如何使用 angular material 下拉菜单查看来自 sql 服务器的每个 select 和 "the company name"

Question

如何修复它以使其正常工作，想使用 angular angular material 下拉以查看每个 select 和 "the company name" 来自 sql 服务器我想绑定下拉列表 select，它会让我选择我已经导入的公司名称

TS-https://prnt.sc/p2eg21

HTML-https://prnt.sc/p2eguq

分量：

    import { Component, OnInit } from '@angular/core';
    import {MatPaginator, MatTableDataSource,MatSort} from '@angular/material';
    import { User } from 'src/app/services/user.model';
    import { UserService } from 'src/app/services/user.service';



    @Component({
      selector: 'app-companyinteraction',
      templateUrl: './companyinteraction.component.html',
      styleUrls: ['./companyinteraction.component.css']
    })
    export class CompanyinteractionComponent implements OnInit {
      // displayedColumns: string[] = ['CompanyName'];
      // dataSource:MatTableDataSource<User>;

      public companiesNames:User[];
      constructor(private prodService:UserService) { }


      ngOnInit() {
        const ob = this.prodService.getUsers();
        ob.subscribe(users => {
          this.companiesNames = users;
          console.log(this.companiesNames);
          console.log('Test from CompanyInteraction'); 
        });
    //...
}

模板：

    <h4>Basic mat-select</h4>
      <mat-form-field>
        <mat-label>Favorite food</mat-label>
        <mat-select>
          <mat-option *ngFor="let User of companiesNames" [value]="companyName">
            {{companyName}}
          </mat-option>
        </mat-select>
      </mat-form-field>

Answer 1

你可以这样做：


  <mat-form-field>
    <mat-label>Favorite food</mat-label>
    <mat-select>
      <mat-option *ngFor="let user of companiesNames" [value]="user.id">
        {{user.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

然后 mat-select 会给你 selected 的 id。阅读文档以在此处获取 selected 值：https://material.angular.io/components/select/api

Answer 2

<h4 class="valuePicker">Select Company</h4>
<mat-form-field class="valuePicker">
  <mat-label>Select Company</mat-label>
  <mat-select>
    <mat-option *ngFor="let p of companies" [value]="p.CompanyName">
        {{p.CompanyName}}
    </mat-option>
  </mat-select>
</mat-form-field>

谢谢....明白了

如何使用 angular material 下拉菜单查看来自 sql 服务器的每个 select 和 "the company name"

How to use angular material drop down to to see on each select an the "the company name" from the sql server

html

asp.net

angular

typescript

string-interpolation