小编ang*_*ner的帖子

如何在屏幕的左侧和右侧放置 Angular Material 单选按钮?

在使用 Angular Material 单选按钮时,我想让它们在 2 个方向 -> 屏幕左侧的 2 和屏幕最右侧的 2。

在手风琴内,我有 4 个单选按钮选项,我想将其中的 2 个放在最左侧,2 个放在最右侧。

我正在使用mat-radio-button来完成此操作。在下面的代码中,我在左侧有按钮,但想在右侧放置更多按钮,如下图所示。

<mat-accordion>
  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)">
    <mat-expansion-panel-header>
      <h3 class="m-portlet__head-text">
        Basic Details
      </h3>
    </mat-expansion-panel-header>
    <div class="m-form m-form--fit m-form--label-align-right m-form--group-seperator">
      <div class="m-portlet__body">
        <div class="form-group m-form__group row">
          <div class="m-radio-list">
            <mat-radio-group class="example-radio-group" (change)="changeComboo($event)" [(ngModel)]="choosePolicyType">
              <p>
                <mat-radio-button class="example-radio-button" *ngFor="let pType of policyTypes" [value]="pType">
                  {{pType}}
                </mat-radio-button>
              </p>
            </mat-radio-group>
          </div>
        </div>
      </div>

      <div *ngIf="choosePolicyType=='Individual'">


        <div class="form-group m-form__group row">
          <div class="col-lg-6">
            <mat-form-field appearance="outline">
              <mat-label>First Name</mat-label>
              <input matInput placeholder=""> …
Run Code Online (Sandbox Code Playgroud)

html css radio-button angular-material angular

7
推荐指数
1
解决办法
1万
查看次数

datepicker: (change) 事件或 (selectedChanged) 在 mat-datepicker 中不起作用

我正在处理的场景是 -> 在 mat datepicker 上选择日期时,我想进行一次 http 调用,执行一些计算 尝试使用 (selectedChanged) 执行此操作,但似乎不起作用,需要有关我如何操作的帮助可以解决这个问题,在此先感谢以下是我尝试执行此操作的 HTML 代码

    <div class="form-group m-form__group row">
    <div class="col-lg-4 m-form__group-sub">
    <mat-form-field class="example-full-width" appearance="outline">
    <mat-label>Policy Start Date</mat-label>
    <input matInput [min]="minDate" [max]="maxDate
    [matDatepicker]="picker4"
    placeholder="Choose a date" formControlName="policy_start_date" >
    <mat-datepicker-toggle matSuffix [for]="picker4" >
    </mat-datepicker-toggle>
  <mat-datepicker #picker4 (selectedChanged)="currentPeriodClicked()">
</mat-datepicker>
                                                </mat-form-field>
                                            </div>
Run Code Online (Sandbox Code Playgroud)

datepicker angular6 angular-material-6

3
推荐指数
1
解决办法
6956
查看次数