Question

我确实有一个数组列表，其中有一些按钮，但是我将它们显示为图标。如果数组的长度大于1，我想禁用按钮。

但是相反，它不起作用，不是在禁用按钮。我在对话框中声明了一个数组，然后在其中显示HTML数据。

这是我的代码。

 <div class="container">
  <div class="body-container">
    <h1>New Skill</h1>
    <div class="content">
    <div class="array" *ngFor="let cat of category">
      <ul mat-dialog-close>
        <button [disabled]="cat.disabled" (click)="addCategory(cat.id)" type="button"><i class="fa-2x" [class]="cat.icon"></i></button>
      </ul>
      <h3> {{cat.description | translate}}</h3>
    </div>
    </div>
  </div>
</div>

.content {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 25rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}
h1 {
  margin: 0 1rem 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid #eee;
  color: #555;
  font-size: 2em;
}
ul {
  color: gray;
  background: #ebebeb;
  border-radius: 2px;
  width: 8rem;
  height: 5rem;
  padding: 0;
  margin: 0;
  align-items: center!important;
  justify-content: center!important;
  display: flex!important;
  &:hover {
    background: #0d3349;
  }
}
h3 {
  align-items: center!important;
  justify-content: center!important;
  display: flex!important;
}

.array {
  padding: 2px;
}
button {
  color: grey;
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  background: white;
  border: none;
  padding: 0;
}

export class CategoryDialogComponent implements OnInit {
  public personalData;
  public career;
  public education;
  public skills;
  public empty;
  public category = [];

  // tslint:disable-next-line:ban-types
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: CategoryDialog,
    private dialogRef: MatDialogRef<CategoryDialogComponent>
  ) {}

  ngOnInit(): void {
     this.category = [
      {
        id: "PersonalData",
        name: Category.PersonalData,
        description: "category.PersonalData",
        icon: "fa fa-user",
        disabled: this.personalData,
      },
      {
        id: "Career",
        name: Category.Career,
        description: "category.Career",
        icon: "fa fa-black-tie",
        disabled: this.career,
      },
      {
        id: "Education",
        name: Category.Education,
        description: "category.Education",
        icon: "fa fa-graduation-cap",
        disabled: this.education,
      },
      {
        id: "Skills",
        name: Category.Skills,
        description: "category.Skills",
        icon: "fa fa-graduation-cap",
        disabled: this.skills
      },
      {
        id: "Another",
        name: Category.Another,
        description: "category.Another",
        icon: "fa fa-bars",
      },
      {
        id: "Files",
        name: Category.Files,
        description: "category.AddFiles",
        icon: "fa fa-file",
        disabled: this.empty
      },
    ];
    this.career = this.data.model.careers.length > 1;
    this.personalData = this.data.model.personalData.length > 1;
    this.education = this.data.model.education.length > 1;
  }

  public addCategory(category) {
    this.dialogRef.close(category);
  }
}

export interface CategoryDialog {
  model: Model;
  skills?: Skills;
  personalData?: PersonalData;
  education?: Education;
  career?: Carrier;
}

Answer 1

@NarayananRamanathan回答说，我需要先设置值，然后再调用this.category。

<div class="container">
  <div class="body-container">
    <h1>New Skill</h1>
    <div class="content">
    <div class="array" *ngFor="let cat of category; let i = index">
      <ul >
        <button mat-dialog-close [disabled]="cat.disabled" (click)="addCategory(cat.id)" type="button"><i class="fa-2x" [class]="cat.icon"></i></button>
      </ul>
      <h3> {{cat.description | translate}}</h3>
    </div>
    </div>
  </div>
</div>

这是TS。

ngOnInit(): void {
    this.career = this.data.model.careers.length > 0;
    this.personalData = this.data.model.personalData.length > 1;
    this.education = this.data.model.education.length > 0;
    this.skills = this.data.model.skills.length > 0;
    this.files = this.data.model.files.length > 0;
    this.empty = this.data.model.emptySubCategory.length > 0;
    this.category = [
      {
        id: "PersonalData",
        name: Category.PersonalData,
        description: "category.PersonalData",
        icon: "fa fa-user",
        disabled: this.personalData,
      },
      {
        id: "Career",
        name: Category.Career,
        description: "category.Career",
        icon: "fa fa-black-tie",
        disabled: this.career,
      },
      {
        id: "Education",
        name: Category.Education,
        description: "category.Education",
        icon: "fa fa-graduation-cap",
        disabled: this.education,
      },
      {
        id: "Skills",
        name: Category.Skills,
        description: "category.Skills",
        icon: "fa fa-graduation-cap",
        disabled: this.skills
      },
      {
        id: "Files",
        name: Category.Files,
        description: "category.AddFiles",
        icon: "fa fa-file",
        disabled: this.files
      },
      {
        id: "Another",
        name: Category.Another,
        description: "category.Another",
        icon: "fa fa-bars",
        disabled: this.empty,
      }
    ];
   
  }

在Array Angular中禁用按钮不会禁用该按钮

1 个答案: