Как использовать Hidden в Angular5?

Question

Я работаю с angular5 в качестве внешнего интерфейса, подпружиненной загрузкой в ​​качестве внутреннего, здесь, в коде ниже, у меня есть список вмешательств, которые администратор может принять или нет.

По этой причине я использовалскрытый атрибут, поэтому, когда администратор проверяет, что он может получить только «принято», я пытался это сделать, но я столкнулся с некоторыми проблемами.

Вот код, который я использовал.

если значение c.valid равно true, появляется кнопка «Принят», в противном случае должна появиться кнопка «Не принято».

Файл интервал.component.html

 <!--/.col-->
<div class="col-lg-12">
  <div class="card">
    <div class="card-header">
      <i class="fa fa-align-justify"></i> Les interventions
    </div>
    <div class="card-body">
      <table class="table table-striped">
        <thead>
        <tr>
          <th>Numéro</th>
          <th>objet</th>
          <th>date</th>
          <th>Etat</th>
        </tr>
        </thead>
        <tbody>

        <tr *ngFor="let c of pageIntervention?.content">
          <td>{{c.id}}</td>
          <td>{{c.objet}}</td>
          <td>{{c.date}}</td>
          <td>
            <button type="button"  [hidden]="c.valid" (click)="validate(c.id)">Not accepted</button>
            <button type="button" [hidden]="!c.valid">Accepted</button>

          </td>
        </tr>

        </tbody>
      </table>

      <ul class="pagination">
        <li class="page-item" [ngClass]="{'active':i==currentPage}" *ngFor="let p of pages ; let i=index">
          <a class="page-link" (click)="gotoPage(i)">{{i}}</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Файл Intervention.component.ts

  export class InterventionComponent implements OnInit {

  pageIntervention:any;
  pages:Array<number>;
  currentPage:number=0;
  page:number=0;
  size:number=5;
  id:number;

  constructor(private intervService: InterventionService,
              private authService: AuthenticationService ) { }


  ngOnInit() {
    this.id  = this.authService.getAuthenticatedUserId();
    this.Allinterventions();
  }

  Allinterventions(){
    this.intervService.getAllinterventions(this.page,this.size,this.id)
      .subscribe((data:any)=>{
        this.pageIntervention = data;
      },err=>{
        console.log('there is an error  ');
      })
  }

  validate(id:number){
      // here i want to modify c.valid so it changes from false to true .

     this.intervService.ValidateIntervention(id); // i call the service 
     method to send the update Request to the API rest (spring). 
  }


  gotoPage(i:number){
    this.currentPage = i;
    this.Allinterventions();
  }
}

Возможно ли, что я пытаюсь сделать?если да, есть идеи, как это сделать?

РЕДАКТИРОВАТЬ Объяснение:

Администратор может получить список вмешательств, которые он может принять или нет (действительным является логический атрибут в Entity весной), чтоЯ хочу, чтобы, если valid равен false, тогда администратор увидит только «Не принято», затем он может нажать на эту кнопку, чтобы принять его, поэтому в методе validate я должен изменить значение c.valid с false на true, этоКстати, только принятая кнопка появится у администратора,

Answer 1

Simply use *ngIf as below
<button type="button"  *ngIf="c.valid; else accepted" (click)="validate(c.id)">Not accepted</button>
<ng-template #accepted>
<button type="button" >Accepted</button>
<ng-template>

Answer 2

Хорошо, попробуйте с помощью ngIf, потому что логика немного запутана, и в функции validate отправьте непосредственно ссылку на объект и измените.

ngIF

 <button type="button"  *ngIf="c.valid" (click)="validate(c)">Not accepted</button>
<button type="button"   *ngIf="!c.valid">Accepted</button>

[скрыто]

 <button type="button"  [hidden]="!c.valid" (click)="validate(c)">Not accepted</button>
<button type="button" [hidden]="c.valid">Accepted</button>

Компонент

validate(ref: any){
      // here i want to modify c.valid so it changes from false to true .
      // i want to change it in pageIntervention first and then call the api
         rest to change it in database  . 

     //this.intervService.ValidateIntervention(id); // i call the service 
     //method to send the update Request to the API rest (spring).

     ref.valid = !ref.valid;

  }