参考【案例:三角形面积计算器】和【案例:设置字体样式和大小】编写一个小程序,综合利用form、checkbox和radio组件实现一元二次方程求根,以及字体样式和大小的变化。利用ngIf和ngSwitch指令实现相应的功能
时间: 2023-06-19 09:06:08 浏览: 144
好的,让我来给您写一份代码。
首先是 HTML 文件的代码:
```html
<div>
<form>
<label for="a">a:</label>
<input type="number" id="a" [(ngModel)]="a" name="a">
<br>
<label for="b">b:</label>
<input type="number" id="b" [(ngModel)]="b" name="b">
<br>
<label for="c">c:</label>
<input type="number" id="c" [(ngModel)]="c" name="c">
<br>
<input type="checkbox" id="round" [(ngModel)]="round" name="round">
<label for="round">保留两位小数</label>
<br>
<br>
<label>请选择字体样式:</label>
<br>
<input type="radio" id="normal" [(ngModel)]="fontStyle" name="fontStyle" value="normal">
<label for="normal">normal</label>
<br>
<input type="radio" id="italic" [(ngModel)]="fontStyle" name="fontStyle" value="italic">
<label for="italic">italic</label>
<br>
<input type="radio" id="oblique" [(ngModel)]="fontStyle" name="fontStyle" value="oblique">
<label for="oblique">oblique</label>
<br>
<br>
<label>请选择字体大小:</label>
<br>
<select [(ngModel)]="fontSize" name="fontSize">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="24">24</option>
<option value="28">28</option>
</select>
<br>
<button (click)="calculate()">计算</button>
</form>
<p *ngIf="showResult">x1: {{x1}}, x2: {{x2}}</p>
</div>
```
其中,我们使用了 ngModel 指令来双向绑定表单数据,使用了 ngIf 指令来根据条件显示结果。
接下来是 TypeScript 文件的代码:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-quadratic-equation',
templateUrl: './quadratic-equation.component.html',
styleUrls: ['./quadratic-equation.component.css']
})
export class QuadraticEquationComponent {
a: number;
b: number;
c: number;
round = false;
fontStyle = 'normal';
fontSize = '12';
showResult = false;
x1: number;
x2: number;
calculate() {
const delta = this.b * this.b - 4 * this.a * this.c;
if (delta >= 0) {
this.x1 = (-this.b - Math.sqrt(delta)) / (2 * this.a);
this.x2 = (-this.b + Math.sqrt(delta)) / (2 * this.a);
if (this.round) {
this.x1 = Math.round(this.x1 * 100) / 100;
this.x2 = Math.round(this.x2 * 100) / 100;
}
this.showResult = true;
} else {
alert('无实数根');
}
}
}
```
其中,我们定义了表单数据和计算结果所需的变量,以及计算函数 calculate()。在 calculate() 函数中,我们根据输入的系数计算一元二次方程的根,并根据 round 变量来判断是否需要保留两位小数。最后,我们将计算结果存放在 x1 和 x2 变量中,并将 showResult 变量设置为 true,以显示计算结果。
最后还需要在 app.module.ts 中添加该组件的声明:
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { QuadraticEquationComponent } from './quadratic-equation/quadratic-equation.component';
@NgModule({
declarations: [
AppComponent,
QuadraticEquationComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
这样,就完成了一元二次方程求根和字体样式和大小变化的小程序。
阅读全文