Как сопоставить данные и вывести результат?

Question

[Адель Халитов]

Ко мне приходит из базы данных объект, условно:

obj = {
action: 'meet'
}

Так же есть массив:

PanelControl: Array<Object> = [
    {action: 'call', translate: 'Звонок'},
    {action: 'meet', translate: 'Встреча'},
    {action: 'task', translate: 'Задача'},
  ];

Сейчас у меня выводится объект из бд естественно таким образом:

<div class="wrapp" *ngFor='let x of obj'>
      <span>{{x.action}}</span>
</div>

И естественно выводится результат "meet", как сделать сопоставленный вывод результата, чтобы выводилось "Встреча".

То же самое и с датами.
Выводится у меня дата, условно 27.02.2019 (полный формат даты из бд в iso ), и если сегодня 27.02.2019 я хочу выводить "Сегодня", а не дату.

Как можно это реализовать? На ум ничего не приходит

Answer 1

[Лариса .•º]

В Angular 6.1 был KeyValuePipe, который позволяет выполнять итерацию свойств объекта:

<div *ngFor="let x of object | obj">
  {{x.key}}:{{x.value}}
</div>

Answer 2

[Qairat]

obj = {
action: 'meet'
}

здесь точно просто объект? или это массив объектов.
Если это объект то у тебя в шаблоне for не сработает. Скорей всего это массив.
Если это массив, то примерно так можно сопоставить.

А если все таки это один объект, то можешь использовать просто filter.

this.new Array = this.PanelControl.filter(f => f.action === obj.action);

А насчет даты тебе надо проверку сделать используя moment или же без него, примерно так:

let now = moment().format('YYYY.MM.DD');
checkDate(date) {
 if (date === now) {
  return 'Сегодня'
 }
}

Либо прям в шаблоне где выводишь дату можно проверку поставить

<span>{{now === x.date ? 'Сегодня': x.date}}</span>

Comments

[Адель Халитов]

Я действительно указал не верные входные данные.
У меня данные с сервера приходят массивом.

tasks = [
{action: 'meet', ....},
{action: 'call', ....}
]

Не есть хорошо создавать еще новый массив, тк таких тасков может быть миллион.

<div class="wrapp" *ngFor='let x of TaskDesk'>
     <mat-checkbox >
              {{x.action}} 
     </mat-checkbox>
</div>

Дело в том, что я перебираю эти данные в html, можно ли сделать это сопоставление прям в интерфейсе?

[Адель Халитов]

<div class="wrapp" *ngFor='let x of TaskDesk'>
                    <div *ngFor="let y of PanelControl">
                        <mat-checkbox *ngIf='y.action === x.action'>
                            {{y.translate}}
                        </mat-checkbox>
                    </div>
                </div>

Вот это работает

[Qairat]

Адель Халитов,
Да можно и в шаблоне,
А если таких тасков миллионы можно сделать так:
В шаблоне

<div class="wrapp" *ngFor='let x of getData(TaskDesk, PanelControl)'>
      <mat-checkbox>
          {{x.translate}}
      </mat-checkbox>
</div>

В контроллере, и можешь его использовать везде где по две форика пишешь в шаблонах:

getData(obj, panel) {
    let res = [];
    obj.map(o => {
      let fPan = panel.find(f => f.action === o.action);
      if (fPan) {
        res.push({action: fPan.action, translate: fPan.translate});
      }
    })
    return res;
  }