angular - Angular PrimenG - 复选框和提交功能
问题描述
我创建了一个组件,该组件将根据用户选择使用的城市显示各个国家/地区PrimeNg
。
如果用户选择London复选框并单击提交,则请求应转到后端 API 并获取国家名称并在 UI 上显示为:所选城市在英国。
后端 JSON 响应:
data: {
"country" : "UK",
"status" : "success"
}
项目文件是:
- app.component.html
<h5>Select City</h5>
<div class="p-field-checkbox">
<p-checkbox name="group1" value="New York" [(ngModel)]="selectedCities" inputId="ny"></p-checkbox>
<label for="ny">New York</label>
</div>
<div class="p-field-checkbox">
<p-checkbox name="group1" value="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox>
<label for="sf">London</label>
</div>
<p-button label="Submit"></p-button>
- app.component.ts
import { Component } from '@angular/core';
import {MenuItem} from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
selectedCities: string[] = [];
checked: boolean = false;
ngOnInit() {}
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CheckboxModule,
FormsModule,
ButtonModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
用户界面如下所示:
我不知道如何存储选定的城市并显示相应的国家,因为我是 Angular Development 的新手。
任何线索或帮助都是非常可观的。
解决方案
app.component.html
<h5>Select City</h5>
<ng-container *ngFor="let city of cities; let i = index">
<div class="p-field-radiobutton">
<p-radioButton name="city" [value]="city" [(ngModel)]="selectedCity" id="i" (onClick)="selectedCountry = null">
</p-radioButton>
<label for="i">{{ city }}</label>
</div>
</ng-container>
<br>
<p-button label="Submit" (onClick)="onSubmit()"></p-button>
<br>
<br>
<label *ngIf="selectedCountry">
Selected city is {{ selectedCity}}<br>Selected country is {{selectedCountry}}</label>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
selectedCity: string;
selectedCountry: string = null;
checked: boolean = false;
cities: string[] = [
'New York',
'London',
'Delhi',
'Mumbai',
'Chennai',
'Hongkong',
'Dhaka',
];
ngOnInit() {}
onSubmit() {
if (!this.selectedCity) {
alert('Please select a city');
return;
}
this.selectedCountry = this.getCountryName();
}
getCountryName() {
// make your api call here
// I am just mocking
let country;
switch(this.selectedCity) {
case 'New York':
country = 'USA';
break;
case 'London':
country = 'UK';
break;
case 'Delhi':
case 'Mumbai':
case 'Chennai':
country = 'India';
break;
case 'Hongkong':
country = 'China';
break;
case 'Dhaka':
country = 'Bangladesh';
break;
}
return country;
}
}
我在Stackblitz上用单选按钮实现了一个工作演示。
因为我不知道你的后端 API。因此,我为演示添加了预定义数据。
看看这是否适合你。
推荐阅读
- reactjs - 尝试使用 AXIOS 导出活动
- asp.net-core - 从 appsettings.json 读取配置列表
- django - Django:生成一个文件,然后将其保存在 FileField
- python - Quart/Flask render_template 返回紧凑的 json
- java - CAS 5.2.3 & LDAP 属性
- python - 用户注销后如何不间断地运行python代码
- xamarin - FlyoutPage xamarin 表单中的自定义汉堡菜单
- salesforce - 调查代码和配置中单个系统管理员用户的引用
- c++ - 为什么元组不会收到未使用的变量警告?
- react-native - 在 TextInput 中反应原生可点击子字符串