Блог

Главная - Вопросы по программированию - Объединить свойство * ngIf в Angular во входной

Объединить свойство * ngIf в Angular во входной

#angular #typescript #angular-material #angular-ng-if #angular11

Вопрос:

У меня есть проект в Angular 11 и Угловой материал, в котором я пытаюсь объединить *ngIf свойство со свойством только для чтения, чтобы избежать ввода двух входных данных.

Это мой component.html :

 <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let clients; let i = index">
          <mat-form-field *ngIf="editIndex!=i" floatLabel="never" [appearance]="'none'">
              <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" [readonly]="true">
          </mat-form-field>
          <mat-form-field *ngIf="editIndex==i" floatLabel="never" [appearance]="'legacy'">
              <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name">
          </mat-form-field>
        </mat-cell>
      </ng-container>

Прямо сейчас у меня есть mat-form-field два с вменяемым, по одному [readonly]="true" в зависимости от *ngIf = "editIndex! = I" собственности. Как я мог бы объединить оба, чтобы поместить только одно поле формы мата с одним входом?

Это то, что я хочу попробовать, но я не знаю, как это сделать и можно ли это сделать:

 <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let clients; let i = index">
      <mat-form-field floatLabel="never" [appearance]="'none'">
          <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" *ngIf="editIndex!=i; [readonly]="true"">
      </mat-form-field>
    </mat-cell>
</ng-container>

Комментарии:

1. Большинство свойств и атрибутов могут быть заданы условно в Angular. Смотрите здесь для получения дополнительной информации. Так что вместо двух отдельных <input> s вы могли бы попробовать <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" [readonly]="editIndex!=i"> . В этом случае *ngIf директива не требуется.

Ответ №1:

Вы также можете установить условное readonly и. appearance 

  <mat-form-field floatLabel="never" [appearance]="editIndex != i ? 'none' : 'legacy'">
     <input matInput placeholder="{{clients.name}}" 
     [(ngModel)]="clients.name" [readonly]="editIndex!=i"">
 </mat-form-field>

Комментарии:

1. Отлично, это работает на меня. Мой вопрос касается внешнего вида, как работает то, что вы поставили?

2. Вы можете найти это в моем фрагменте, это, вероятно, работает, но дайте мне знать, если нет.

3. Да, код работает. Я сказал, что как теперь работает свойство [внешний вид]?

Ответ №2:

Как насчет…?

 <input matInput ... [readonly]="editIndex!=i">

Ответ №3:

Вы можете это сделать:

 <ng-container matColumnDef="name">
   <mat-header-cell *matHeaderCellDef>
     Name
   </mat-header-cell>
   <mat-cell *matCellDef="let clients; let i = index">
        <mat-form-field 
           *ngIf="editIndex!=i" 
           floatLabel="never" 
           [appearance]="'none'" // Since you are not binding with any variable here, you can replace with appearance="none"
        >
           <input 
              matInput 
              placeholder="{{clients.name}}" // You can replace this with [placeholder]="clients.name"
              [(ngModel)]="clients.name" 
              [readonly]="editIndex !== i"
            />
        </mat-form-field>
   </mat-cell>
</ng-container>
Метки: