如何删除角度特定字段的属性？答案

【问题标题】：how to remove the attribute for particular field in angular?如何删除角度特定字段的属性？
【发布时间】：2021-05-22 02:13:21
【问题描述】：

我在 mat-select 组件中绑定了 placeholder 属性，效果很好，但是我想在使用到我的表单组件时更改组件的 placeholder 属性的行为。我该怎么做？虽然是绑定的，但是

HTML 文件：选择搜索.html


<mat-select class="d-block form-control text-capitalize" (ngModelChange)="onChange($event)" [(ngModel)]="activeOption"
  panelClass="my-panel-class" ngDefaultControl
 [placeholder]="(data?.length == 0 || data == undefined || data == null || data == '') ? 'No Data Available' : '--Select --  '"
  #Select multiple [disabled]="disabled" [ngClass]="{'disabled' : disabled}">
  <div class="select-pannel">
    <ngx-mat-select-search [placeholderLabel]="'Search ' + type" [noEntriesFoundLabel]="'No matching records found'"
      [formControl]="control" ngDefaultControl></ngx-mat-select-search>
  </div>
</mat-select>

select-search.ts 组件

import { Component, OnInit, Input, Output, ViewChild, ChangeDetectionStrategy, SimpleChange, SimpleChanges } from "@angular/core";
import { FormControl } from '@angular/forms';
import { Subject, ReplaySubject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { EventEmitter } from '@angular/core';

@Component({
  selector: 'select-search',
  templateUrl: './select-search.component.html'
})

export class SelectSearchComponent implements OnInit {

  @Input('data') data;
  @Input('type') type;
  @Input('disabled') disabled;
  @ViewChild('Select', { static: false }) Select = null;
  _activeItem: any;
  @Input('selected') set activeItem(activeItem: any) {
    this._activeItem = activeItem;
    if (activeItem) {
      this.activeOption = activeItem;
    }
  }

  get activeItem() {
    return this._activeItem;
  }
  @Output() selectedItem: any = new EventEmitter();

  activeOption: any;

  /** control for the selected item **/
  public control: FormControl = new FormControl();
  private _onDestroy = new Subject<void>();
  public filteredRecords: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);

  ngOnInit() {
    if (this.data) this.filteredRecords.next(this.data.slice());
    this.control.valueChanges
      .pipe(takeUntil(this._onDestroy))
      .subscribe(() => {
        this.filterData();
      });
    if (this.activeItem) this.activeOption = this.activeItem;
  }

  ngOnChanges(change: SimpleChanges) {
    if (change.data && change.data.currentValue) {
      this.filteredRecords.next(this.data.slice());
    }
  }

  filterData() {
    let search = this.control.value;
    if (!search) {
      this.filteredRecords.next(this.data.slice());
      return;
    } else search = search.toLowerCase();
    this.filteredRecords.next(
      this.data.filter(item => {
        return ('firstName' in item && item.firstName.toLowerCase().indexOf(search) > -1) ||
          ('buildingName' in item && item.buildingName.toLowerCase().indexOf(search) > -1)
      })
    );
  }

  onChange(event) {
    let obj = { item: event, type: this.type };
    this.selectedItem.emit(obj);
  }

  isDisable(type, values, id) {
    if (type == 'QHL Lead' && values) {
      if (values.length == '1' && !values.includes(id)) return true;
      else return false;
    }
  }

  okClicked() {
    this.Select.close()
  }

}

我使用组件的表单字段，我只想禁用该字段的占位符属性。


 <div class="row w-100">
     <div class="col-md-6">
        <label class="d-flex">Building
           <span class="ml-auto" *ngIf="!add">
              <span class="text-primary cursor-pointer" (click)="viewHistory('createWorkSchedules')">
                  </span>
                </span>
              </label>
              <select-search class="d-block w-100" [disabled]="!form.value.createWorkSchedules && add"
                (selectedItem)="manageCreateBuildings($event)" [selected]="createWorkScheduleBuildingIds"
                [data]="buildings" [type]="'Building'"></select-search>
      </div>
  </div>

【问题讨论】：

标签： html angular forms angular-material

【解决方案1】：

你应该使用属性绑定语法

例子：

<p [attr.attribute-you-are-targeting]="expression"></p>

当表达式解析为 null 或 undefined 时，Angular 会完全删除该属性。

您可以在这里阅读更多内容 --> https://angular.io/guide/attribute-binding

【讨论】：