angular - 如何在 typescript 中编辑CSS样式？

Question

我计划将一个组件更改为必需的，但该组件是共享组件，因此它不会在我的 HTML View 上生效。如何使您的组件符合要求？

register.component.html

<app-dropdown-multi-select-search fxFlex *ngIf="(register$ | async)?.skills"
                                          [dataList]="(register$ | async)?.skills" [placeHolder]="'Skills'"
                                          [multiSelectDropdown]="true" [searchItem]="true"
                                          (selectedItemEmitted)="handleSelectChange($event)" 
                                          [isRequired]="true">
        </app-dropdown-multi-select-search>

dropdown-multi-select-search.component.ts

@Input()
public isRequired = false;

if(this.isRequired == true) {
  this.isRequired
}

dropdown-multi-select-search.component.html

<mat-form-field *ngIf="dataList">
  <mat-select #multiSelect [placeholder]="placeHolder" name="multi-select-dropdown" 
  [multiple]="multiSelectDropdown" (selectionChange)="onSelect($event)" [isRequired]="false">
<mat-option>

我不知道要在 if 条件中放入什么。在其中，我希望一旦将其设置为“true”，就需要该组件。

谢谢!

Answer 1

简单地将required属性绑定(bind)添加到您的mat-select，例如

 <mat-select #multiSelect [placeholder]="placeHolder" name="multi-select-dropdown" 
  [multiple]="multiSelectDropdown" (selectionChange)="onSelect($event)" [required]="isRequired">

在 ts 文件中，您不需要额外的代码，只需 @Input 就可以了，所以应该如此

@Input() isRequired = false;

demo