Сравнение двух массивов в angular с использованием ngIf

Question

В моем приложении angular у меня есть два массива arr1, arr2, где я использую arr1 для рендеринга кнопки в моем представлении с помощью ngFor. Я хочу изменить стиль кнопки, сравнив элементы arr1 и arr2. если есть совпадение, я хочу применить другой стиль. Как я могу это реализовать, пожалуйста, посоветуйте мне.

app.component.ts

arr1 = [{test:1}, {test:2}, {test:3}, {test:4}, {test:5}, {test:6}, {test:7}, {test:8}, {test:9}, {test:10}]
arr2 = [{test:5}, {test:9}]

appCopmponent. html

<div class="col-md-12">
    <div class="form-row">
      <div class="col-md-1" *ngFor="let data of arr1">
        <input type="button" class="form-control" [(ngModel)]="data.test" readonly>
      </div>
    </div>
  </div>

Answer 1

Можно использовать атрибут ngClass.

.ts файл

arr1 = [{test:1}, {test:2}, {test:3}, {test:4}, {test:5}, {test:6}, {test:7}, {test:8}, {test:9}, {test:10}]
arr2 = [{test:2}, {test:1}];

contains: boolean;

  ngOnInit() {
    this.contains = !this.arr2.filter(item => !this.arr1.find(x => x.test === item.test)).length;
  }

в шаблоне

<p [ngClass]="contains? 'bg-blue': 'bg-red'">
  Change background based on array comparison
</p>

css файл

  .bg-red {
    background-color: red
  }
  .bg-blue {
    background-color: blue
  }

Также я создал для вас пример StackBlitz .

Answer 2

Сравните ваш массив с файлом компонента.

  compareValue(data){
     if(this.arr2.find(o => o.test === data.test)){
       return true;
     }else{
       return false;
   }
}

Вызовите функцию из html и добавьте свой класс стиля, используя ngClass.

<div class="col-md-12">
<div class="form-row">
  <div class="col-md-1" *ngFor="let data of arr1">
    <input type="button" class="form-control" [ngClass]="{'success':compareValue(data)}" [(ngModel)]="data.test" readonly>
  </div>
</div>

StackBlitz

Answer 3

вы можете использовать [ngClass] для назначения класса стиля в зависимости от ваших потребностей

https://stackblitz.com/edit/angular-material-starter-l1c9t5?file=app%2Fapp.component.ts

<div class="col-md-12">
    <div class="form-row">
      <div class="col-md-1" *ngFor="let data of arr1">
        <input [ngClass]="founded(data) ? 'exist' : 'not-exist'" type="button" class="form-control" [(ngModel)]="data.test" readonly>
      </div>
    </div>
  </div>
  <style>
    input{
      padding: 0 2rem;
      margin: 1rem 0
    }
    .exist{
      border: orange solid 5px;
    }
    .not-exist{
      border: green solid 5px;
    }
  </style>

и код:

arr1 = [{test:1}, {test:2}, {test:3}, {test:4}, {test:5}, {test:6}, {test:7}, {test:8}, {test:9}, {test:10}]

arr2 = [{test:5}, {test:9}]


founded(item: {test: number}){
  return !!this.arr2.find(x=>x.test === item.test)
}