Angular

Question

我遇到了一个问题，我想根据单击的单选按钮更改 div。我一直在没有表单标签的情况下使用它，只要我点击按钮，它就会改变，而不是在提交按钮上。 我想要另一种方式，即它应该在单击按钮时提交值，然后更改内容，任何我可能做错的建议。

它应该根据收音机 I select 显示不同的问题。在 YES 的情况下，它显示其他，在 NO 的情况下，显示另一个。然后进一步的问题将是相同的。 （这个逻辑没问题）

onItemChange(value) {
    console.log(value)
    this.previous = false;
    if (value == 1) {
      this.yesOption = true;
    } else if (value == 0) {
      this.noOption = true;
    }
  }

工作演示：https://stackblitz.com/edit/angular-ivy-4lhhxh

Answer 1

如果您不使用表格，您需要：

使用 [(ngModel)] 将值存储在其他地方（不要忘记将配置更改为 Standalone），或者..
拥有一个带值的对象并在 onItemChange 回调中分配单独的值（如果您不想使用 [(ngModel)]
使用@ViewChild 来引用输入并获取值（这是..丑陋的）

无论如何，您当前在 onItemChange 中的逻辑必须移至 nextQuestion。

根据您的要求，我在 StackBlitz 上做了一个示例：https://stackblitz.com/edit/angular-ivy-2mwzxd

Answer 2

我创建了一个 demo 来实现您的要求。

HTML

<div>
    <h3>{{ 'Question ' + (currentQuestionIndex+1) }}</h3>
    <div>
        <div *ngIf="currentQuestionIndex === 0">
            <div class="">
                <label>Yes</label>
                <input value="yes" [(ngModel)]="firstAnswer" type="radio">
            </div>
            <div class="">
                <label>No</label>
                <input value="no" [(ngModel)]="firstAnswer" type="radio">
            </div>
        </div>

        <p *ngIf="currentQuestionIndex > 1">Normal question</p>
        <p *ngIf="currentQuestionIndex === 1">You selected {{ firstAnswer === 'yes' ? '"Yes"' : '"No"' }} for question 1</p>
    </div>
    <button (click)="next()">Next</button>
</div>

component.ts

export class AppComponent {
  questionsLength = 5;
  questions = Array(this.questionsLength);
  currentQuestionIndex = 0;
  firstAnswer;
  next() {
    if (this.currentQuestionIndex < this.questionsLength - 1) {
      this.currentQuestionIndex++;
    }
  }
}

您可以在无线电输入上使用 ngModel，稍后使用该变量检查已选择的内容。

更新

如果你想有条件地显示一些div:

<ng-container *ngIf="currentQuestionIndex === 1">
          <div *ngIf="firstAnswer === 'yes'">You selected "Yes" for question 1</div>
          <div *ngIf="firstAnswer === 'no'">You selected "No" for question 1</div>
 </ng-container>

Angular - 更改提交按钮上单选按钮的内容

Angular - change the content from Radio button on submit button

javascript

events

dom-events

typescript