我怎样才能在角度上相应地实现百分比分割答案

【问题标题】：How can i achieve the percentage splitting accordingly in angular我怎样才能在角度上相应地实现百分比分割
【发布时间】：2023-02-04 15:43:08
【问题描述】：

我正在努力实现这一目标角度如果 txtBox1 有 75%，我想拆分如图所示的百分比我想重新挖掘 txt2，txt3 拆分 reming 25%，如果我将 txt1 更改为 50%，我希望其他的分别为 25% 和 25%，就像动态拆分一样值可能会有所不同

这是我试过的我知道它不多StackBlitz我是新来的

有可能实现这一目标吗？请帮帮我

【问题讨论】：

您能否包含您的代码，以便我们可以使用它，最好是在 StackBlitz 中。这绝对是可以实现的
你好@nate-kumar 请检查 stackblitz 我没有写太多因为我是 angular 的超级新手
首先尝试使用简单的 HTML 和 CSS。然后，发现您应该使用像 Bootstrap 这样的工具包。此外，发现您可能需要一个可移植的布局，它应该适用于大屏幕和小屏幕，并且百分比拆分可能不是您真正想要的
@Roland 实际上我只是在寻找百分比拆分逻辑我不专注于 UI 我分享了这些图像所以很容易传达
您的问题对“此 Q 是否显示研究成果？”有赞成票和反对票。那么，您是否尝试过没有角度，使用纯 html 和 css？

标签： angular asp.net-core angular10

【解决方案1】：

逻辑可能如下：

  const restPercentages = 100 - this.form.controls.textbox1.value;
  this.form.controls.textbox2.setValue(restPercentages/2);
  this.form.controls.textbox3.setValue(restPercentages/2);

我不知道你想在什么时候做这样的检查。也许在 textbox1 的模糊事件上？并禁用 textbox2、textbox3 是可行的方法。

【讨论】：

【解决方案2】：

这是一个解决方案，当输入和模糊给定控件时，它总是更新其他两个控件。可以实施优化+越界检查来改进解决方案，但希望这足以证明这个概念

interface TextForm {
  textbox1: FormControl<string>;
  textbox2: FormControl<string>;
  textbox3: FormControl<string>;
}

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <div>
        <input type="text" formControlName="textbox1" (blur)="calculateRemainders('textbox1')" />
        <hr />
      </div>
      <div>
        <input type="text" formControlName="textbox2" (blur)="calculateRemainders('textbox2')" />
        <hr />
      </div>
      <div>
        <input type="text" formControlName="textbox3" (blur)="calculateRemainders('textbox3')" />
        <hr />
      </div>
    </form>
  `,
})
export class App {
  form: FormGroup<TextForm>;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      textbox1: [''],
      textbox2: [''],
      textbox3: [''],
    });
    this.applyInitValues();
  }

  applyInitValues() {
    let count = +Object.keys(this.form.controls).length;
    let equality = (100 / count).toFixed(1);

    this.form.setValue({
      textbox1: equality,
      textbox2: equality,
      textbox3: equality,
    });
  }

  calculateRemainders(editedControlKey: keyof TextForm) {
    // Get array of controls as [[controlKey1, control1], [controlKey2, control2], [controlKey3, control3]]
    // Sort to make sure that the first index is the control that was edited
    const controls: [string, FormControl<string>][] = Object.entries(this.form.controls).sort(([controlKey]) => controlKey === editedControlKey ? 1 : 0);

    // Ensure the first control value is set to 1 decimal place and calculate the remaining 2 values (also to 1.d.p)
    const editedControlValue: number = this.toOneDecimalPlace(Number(this.form.get(editedControlKey).value));
    const firstRemainder: number = this.toOneDecimalPlace((100 - editedControlValue) / 2);
    const secondRemainder: number = this.toOneDecimalPlace(100 - editedControlValue - firstRemainder);

    // Apply the updated values to each control (as strings)
    controls[0][1].setValue(`${editedControlValue}`);
    controls[1][1].setValue(`${firstRemainder}`);
    controls[2][1].setValue(`${secondRemainder}`);
  }

  toOneDecimalPlace(number: number) {
    return Math.round(number * 10) / 10
  }
}

StackBlitz

【讨论】：