时间戳

首页 > 解决方案 > 如何将我的工作转换为材料角度/垫选择

angular-material - 如何将我的工作转换为材料角度/垫选择

问题描述

I'm new in angular material. How can I convert all of this into material angular? I also import material angular to my modules, I tried to use mat-select, I change select into mat-select but it didn't work. can someone help me about this?



    <input class="input-field" name="postal" type="text" placeholder="Postal Code" name="postal" required>  
<select class="input-field" name="region" id="region" onclick="makeDisable()" onchange="javascript: dynamicdropdownProvince(this.options[this.selectedIndex].value);">
    <option disabled selected>Region</option> 
    <option value="metromanila">Metro Manila</option>
    <option value="mindanao">Mindanao</option>
    <option value="northluzon">North Luzon</option>
    <option value="southluzon">South Luzon</option>
    <option value="visayas">Visayas</option> 
</select>

document.write('Province') document.write('City') document.write('Barangay')

function dynamicdropdownProvince(listindex) { switch (listindex) { case "metromanila" : document.getElementById('provincestatus').options[0]=new Option("Province",""); document.getElementById("provincestatus").options[1]=new Option("马尼拉大都会","metromanila"); document.getElementById("provincestatus").disabled=false; 休息;
case "mindanao" : document.getElementById("provincestatus").options[0]=new Option("Province",""); document.getElementById("provincestatus").options[1]=new Option("Agusan Del Norte","agusandelnorte"); document.getElementById("provincestatus").disabled=false; 休息; } 返回真；} function dynamicdropdownCity(listindex) { switch (listindex) { case "agusandelnorte" : document.getElementById("citystatus").options[0]=new Option("City",""); document.getElementById("citystatus").options[1]=new Option("Buenavista","buenavista"); document.getElementById("citystatus").disabled=false; 休息; 案子 ” getElementById("barangaystatus").options[0]=new Option("Barangay","barangaystatus"); document.getElementById("barangaystatus").options[1]=new Option("Barangay 287","barangay287"); document.getElementById("barangaystatus").disabled=false; 休息; }

return true;

}

标签： angular-material

解决方案

如果您按照https://material.angular.io/components/select/overview的步骤操作，它应该可以工作

HTML：

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selectedValue">
    <mat-option>None</mat-option>
    <mat-option value="metromanila">Metro Manila</mat-option>
    <mat-option value="mindanao">Mindanao</mat-option>
    <mat-option value="northluzon">North Luzon</mat-option>
    <mat-option value="southluzon">South Luzon</mat-option>
    <mat-option value="visayas">Visayas</mat-option> 
  </mat-select>
</mat-form-field>

组件.ts：

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

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
})
export class SelectValueBindingExample {
  selectedValue: string; <-- *will be null if nothing selected or will hold a string*
}

模块.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatSelectModule} from '@angular/material/select';

@NgModule({
  imports: [
    CommonModule, MatSelectModule
  ]
})
export class MyModule { }

推荐阅读