Angular 角度打底-复选框和提交功能

我创建了一个组件，该组件将根据城市用户使用PrimeNg选择显示相应的国家

如果用户选中伦敦复选框并单击提交，则请求应转到后端API，获取国家名称并在UI上显示为：所选城市位于英国

后端JSON响应：

项目文件包括：

app.component.html app.module.ts 用户界面如下所示：

我不知道如何存储选定的城市，并显示相应的国家，因为我是新的角度发展

任何线索或帮助都是非常值得赞赏的。

app.component.html

我已经用单选按钮在上实现了一个工作演示

因为我不知道你的后端API。因此，我为演示添加了预定义的数据

---

看看这是否对您有效。

如果您同时选择这两个选项，您会显示什么？我希望在给定的时间只选择一个复选框。然后您需要单选按钮，而不是复选框。我将有多个城市超过10个，这就是我添加复选框的原因。这只是我试图添加的一个示例。您可能有多个城市，但只需选择其中一个。这是主要目标，非常感谢你！这真的很有帮助。不客气，伙计。嗨，如果你在回答中添加额外的代码，以防Stackblitz链接在将来发生变化，这将非常有用@malbarmavi@ZunayedShahriar精彩的

data: {
"country" : "UK",
"status" : "success"
}

<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>

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() {}
}

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 { }

<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>

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;
    }
}