Angular - 检查是否选择了所有选项以启用按钮

Question

这是一个测验应用程序，在这种情况下，我的下一个按钮将重定向到另一个页面，默认情况下它是禁用的。如果我选择它应该启用的所有选项。

笔记：

我选择选项和选择正确/错误的功能工作正常，我只是不知道在选择每个选项时如何启用。

有什么帮助或建议吗？工作演示：https ://stackblitz.com/edit/angular-ivy-5qtyxy

buttonDisabled = true;

<button class="btn-next" [disabled]="buttonDisabled">

  Next

</button>

Answer 1

我对此的看法是将其定义buttonDisabled为吸气剂，然后评估每个问题的状态是否允许导航到下一页...在我的实现中，用户必须选择类型 2 问题的所有答案，但只选择类型 1 问题的一个答案。如果这不是您想要的，请在评论中说明，这对我来说是合乎逻辑的。我希望它已经对你有所帮助。任何问题？问一下。

Answer 2

你可以使用 Object.keys ，像这样App.component.html<button class="btn-next" [disabled]="isDisabled()">&nbsp; &nbsp; Next&nbsp; </button>app.component.tsisDisabled(): boolean {&nbsp; return Object.keys(this.answerEvaluation).length !== Object.keys(this.practiceQuizData).length;}

Answer 3

答案将起作用，但您可以将其设为此处显示的 Angular 方式：https://angular.io/guide/forms-overview有两种方式：模板驱动或反应式表单然后您可以将禁用属性绑定到表单有效属性。选择最适合您需求的产品。希望它会有所帮助。