angular6 - 角度 6 : How to build a simple multiple checkbox to be checked/unchecked by the user?

Question

我在阅读了有关该主题的多个主题后写了这篇文章，但没有一个主题能够满足我的需求。 This post似乎有解决方案，但我不必从 json 中读取检查的值。

我所需要的是:

1. 从对象数组中读取国家/地区
2. 动态地构建代表每个国家/地区的复选框列表

3. 用户应选中和取消选中每个复选框

   奖金:

   • 获取已检查输入的值并将其发送到组件外部

   我知道这样做可能真的很愚蠢，但到目前为止我所完成的只是拥有一个不可选中的复选框列表，仅此而已。

代码如下:模板:

<div class="form-group">
    <div *ngFor="let country of countries">
        <input type="checkbox"
                  name="countries"
                  value="{{country.id}}"
                  [(ngModel)]="country"/>

        <label>{{country.name}}</label>
    </div>
</div>

还有 TS:

countries = [
    {id: 1, name: 'Italia'},
    {id: 2, name: 'Brasile'},
    {id: 3, name: 'Florida'},
    {id: 4, name: 'Spagna'},
    {id: 5, name: 'Santo Domingo'},
]

我尝试使用响应式(Reactive)表单，但这给我带来了比模板驱动更多的问题(当然是因为我的实现不好)。请帮帮我，我不知道该往哪里撞了

Answer 1

这是一个工作示例，您可以在其中观察到向每个国家/地区添加了额外的“选中”值，并使用 [(ngModel)] 绑定(bind)到每个复选框的值。

Stackblitz live example

模板:

<p>
Test checkboxes
</p>

<div *ngFor="let country of countries; let i = index;">
  <input type="checkbox" name="country{{country.id}}" [(ngModel)]="countries[i].checked">
  <label for="country{{country.id}}">{{country.name}}</label>
</div>

<button type="button" (click)="sendCheckedCountries()" *ngIf="countries">Click to send the selected countries (see your javascript console)</button>

<p *ngIf="!countries">loading countries, please wait a second...</p>
<p *ngIf="countries">Debug info : live value of the 'countries' array:</p>

<pre>{{ countries | json }}</pre>

组件:

//...
export class AppComponent implements OnInit  {
  public countries: Country[];

  constructor(private countryService: CountryService) {}

  public ngOnInit(): void {
    // loading of countries, simulate some delay
    setTimeout(() => {
       this.countries = this.countryService.getCountries();
    }, 1000);
  }

  // this function does the job of sending the selected countried out the component
  public sendCheckedCountries(): void {
    const selectedCountries = this.countries.filter( (country) => country.checked );
    // you could use an EventEmitter and emit the selected values here, or send them to another API with some service

    console.log (selectedCountries);
  }
}

为了使用一些适当的 TypeScript，我创建了一个界面 Country :

interface Country {
    id: number;
    name: string;
    checked?: boolean;
}

<小时/>

我希望你现在明白了。

注意:检查的值一开始并不是“自动存在”的，但这并不重要。

如果不存在，则与未定义相同，并且在复选框和读取选中的国家/地区的函数中都将被视为false。

对于“发送值”部分:

该按钮会将所选值输出到浏览器的控制台，并使用一些类似于 @Eliseo 的答案建议的过滤器(我只是使用完整的国家/地区对象而不是 id)

对于“真实用例”情况，您可以使用 Angular 的 EventEmitters 并让您的组件将值“发送”到父组件，或者调用一些服务函数，将您的值发送到另一个 API 的 POST 请求。