Question

我正在尝试制作一个提问的调查应用，用户可以点击圈子获取答案。必须以这样的方式完成，即每次只能填充一个圆（即有颜色）。因此，如果有一个问题询问＆＃34;你最喜欢的颜色是什么？它可以选择蓝色和红色。用户单击蓝色，该选项的圆圈变为灰色。然后，用户点击红色，从蓝色圆圈中删除突出显示，然后应用程序将红色圆圈突出显示。

这些圈子中的每一个都必须是一个组件。我已轻松制作它们，但制作上面指定的圆形填充部分证明是一项挑战。我会在这里发布部分组件。我是角度2的新手，对于任何语法/逻辑错误都很抱歉。

主应用程序组件文件：

<div>
<p style="font-size: 23px;">What is your favorite color?</p>
<app-fave-color-red></app-fave-color-red>
<app-fave-color-green></app-fave-color-green>
<app-fave-color-blue></app-fave-color-blue>
<app-fave-color-other></app-fave-color-other>
</div>

这个是＆＃34; fave-color-red＆＃34;组件html

<div>
<div class="circle" *ngIf="isCircle" (click)="changeToGray()"></div>
<div class="filledCircle" *ngIf="!isFilled" (click)="changeToGray()"></div>
<p> &nbsp; Red </p>
</div>

这是fave color red component

的.ts文件

isFilled = true;
isCircle = true;

changeToGray() {
  if (this.isFilled == true) {
  this.isCircle = false;
  this.isFilled = false;
} else if (this.isFilled == false) {
  this.isCircle = true;
  this.isFilled = true;
}
}

基本上我是用红色，蓝色等填充圆圈div来切换空圆圈div。用户也可以取消选择圆圈。

我只是不知道确保每个问题只能填一个圈子的逻辑。我想我必须在我的主app.component文件中做一些事情，但我不确定是什么。

非常感谢你。

Angular 2调查应用程序

0 个答案: