真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷(xiāo)
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷(xiāo)
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

export interface User {
 name: string; // 名字
 age?: number; // 年齡
 gender?: string; // 性別
 role?: string; // 角色
 theme?: Theme; // 主題
 isActive?: boolean; // 是否激活
 hobbies?: {[key: string]: boolean}; // 愛(ài)好
 topics?: string[]; // 話題
 province: number; // 省
 city: number; // 市
}

export interface Theme {
 display: string; // 顯示文本
 backgroundColor: string; // 背景顏色
 fontColor: string; // 字體顏色
}

  名字
  

  年齡
  

genders = [{ value: 'F', display: '女' },{ value: 'M', display: '男' }];

  性別
   
   
      {{gender.display}}
 

Select - 基本類(lèi)型

數(shù)據(jù)

復(fù)制代碼 代碼如下:

roles = [{ value: 'admin', display: '管理員' },{ value: 'user', display: '普通用戶' }];

模板

 角色
 
   
    {{role.display}}
  
 

Select - 對(duì)象

數(shù)據(jù)

themes: Theme[] = [
 { backgroundColor: 'black', fontColor: 'white', display: '黑色' },
 { backgroundColor: 'white', fontColor: 'black', display: '白色' },
 { backgroundColor: 'grey', fontColor: 'white', display: '灰色' }
];

模板

 主題
 
   
     {{theme.display}}
   
  

Mulit Select

數(shù)據(jù)

topics = [
 { value: 'game', display: '游戲' },
 { value: 'tech', display: '科技' },
 { value: 'life', display: '生活' }
];

模板

  話題
  
   
     {{topic.display}}
   
  

Cascading Select - 級(jí)聯(lián)操作

數(shù)據(jù)

provinces = [
  {pk:1,pv:'北京'},
  {pk:16,pv:'福建'}
 ];

citieData = [
  {pk:1,ck:72,cv:'朝陽(yáng)區(qū)'},{pk:1,ck:2800,cv:'海淀區(qū)'},
  {pk:1,ck:2801,cv:'西城區(qū)'},{pk: 16,ck: 1303,cv: '福州市'}, 
  {pk: 16,ck: 1315,cv: '廈門(mén)市'},{pk: 16,ck: 1332,cv: '泉州市'}
];

cities = this.citieData.filter(city => city.pk === 16); // 默認(rèn)福建省

模板

  地址
  
     
       {{province.pv}}
     
  
  
    
     {{city.cv}}
    
  

Checkbox

模板

  
   
    
      是否激活
   
  

Multi Checkbox

數(shù)據(jù)

hobbies = [
 { value: 'reading', display: '看書(shū)' },
 { value: 'music', display: '聽(tīng)歌' },
 { value: 'movie', display: '電影' }
];

模板

  愛(ài)好
  
    
       {{hobby.display}}
  

完整示例

模板

{{title}}

   
    名字
    
   
   
    年齡
    
   
   
    性別
    
     
      {{gender.display}}
    
   
   
    角色
    
     
      {{role.display}}
    
   
   
    主題
    
     
      {{theme.display}}
     
    
   
   
    
     
      
      是否激活
     
    
   
   
    話題
    
     
      {{topic.display}}
     
    
   
   
    愛(ài)好
    
      
      {{hobby.display}}
    
   
   
    地址
    
     
      {{province.pv}}
     
    
    
     {{city.cv}}
    
   
   保存

組件類(lèi)

export class AppComponent implements OnInit {
 title = '新增用戶';
 user: User;

 genders = [{ value: 'F', display: '女' },{ value: 'M', display: '男' }];

 roles = [{ value: 'admin', display: '管理員' },{ value: 'user', display: '普通用戶' }];

 themes: Theme[] = [
  { backgroundColor: 'black', fontColor: 'white', display: '黑色' },
  { backgroundColor: 'white', fontColor: 'black', display: '白色' },
  { backgroundColor: 'grey', fontColor: 'white', display: '灰色' }
 ];

 topics = [
  { value: 'game', display: '游戲' },
  { value: 'tech', display: '科技' },
  { value: 'life', display: '生活' }
 ];

 hobbies = [
  { value: 'reading', display: '看書(shū)' },
  { value: 'music', display: '聽(tīng)歌' },
  { value: 'movie', display: '電影' }
 ];

 provinces = [
  {pk:1,pv:'北京'},
  {pk:16,pv:'福建'}
 ];

 citieData = [
  {pk:1,ck:72,cv:'朝陽(yáng)區(qū)'},{pk:1,ck:2800,cv:'海淀區(qū)'},
  {pk:1,ck:2801,cv:'西城區(qū)'},{pk: 16,ck: 1303,cv: '福州市'}, 
  {pk: 16,ck: 1315,cv: '廈門(mén)市'},{pk: 16,ck: 1332,cv: '泉州市'}
 ];

 cities = this.citieData.filter(city => city.pk === 16);

 changeHobby(hobby, event) {
  this.user.hobbies[hobby.value] = event.target.checked;
 }

 changeProvince(pk) {
  this.cities = this.citieData.filter((city)=> city.pk == pk);
  this.user.city = this.cities[0].ck;
 }

 ngOnInit(): void {
  this.user = {
   name: '',
   gender: this.genders[0].value,
   role: this.roles[1].value,
   theme: this.themes[0],
   isActive: false,
   hobbies: {'music': true},
   topics: [this.topics[1].value],
   province: 16, // 福建省
   city: 1315 // 廈門(mén)市
  }
 }

  save() {
  console.log(this.user);
 }
}

關(guān)于如何使用Angular 表單控件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。