kikosko

Как отфильтровать массив:

const filterArrByObj = (arr, obj) =>
  Object.entries(obj).reduce((arr, [ k, v ]) => {
    return arr.filter(Array.isArray(v)
      ? n => v.includes(n[k])
//           !v.length || v.includes(n[k]), если при пустом массиве допустимо любое значение
      : n => v === n[k]
//           n[k].includes(v), если точное соответствие не нужно
    );
  }, arr);

Отфильтрованные данные оформляете в виде вычисляемого свойства:

computed: {
  filteredData() {
    return filterArrByObj(this.data, this.filters);
  },
},

Значение которого используете при рендеринге таблицы вместо исходных данных:

<tr v-for="n in filteredData">
  ...

Так чего надо-то? Говорите "массивы", показываете объекты.

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

Object
  .entries({ defaultTest, systemTest })
  .flatMap(([ k, { references, ...n } ]) => references.map(m => ({
    ...m,
    ...n,
    [k]: true,
  })))

Если же это массивы (а сейчас показываются, соответственно, их элементы), тогда

Object
  .entries({ defaultTest, systemTest })
  .map(([ k, v ]) => v.map(({ references, ...n }) => references.map(m => ({
    ...m,
    ...n,
    [k]: true,
  }))))
  .flat(2)

const test = [
  ...defaultTest.references.map(({ something }) => ({ something, main: defaultTest.main, defaultTest: true })),
  ...systemTest.references.map(({ something }) => ({ something, main: systemTest.main, systemTest: true })),
];

Замените

{{bDay | date: format}}

на

{{ date | date : toggDate[pic.id] ? 'fullDate' : 'shortDate' }}

А свойство format можно удалить.

localStorage.setItem("isLoggedIn", loggedIn)

инициализация переменной
loggedIn: boolean = (localStorage.getItem("isLoggedIn") === 'true') || false

но у вас и так это есть
в чем сложность то?

А почему вы после удаления поста перезапрашиваете данные (да ещё при этом не очищаете collection - из-за этого посты должны дублироваться)? - куда проще и быстрее удалить один элемент из массива.

Наверное, в removePost вместо this.getPictures() должно быть что-то вроде

this.collections.splice(this.collection.findIndex(n => n.id === picId), 1)

После удаления элемента вы запрашиваете исходные данные - метод getPictures вместо this.Mycollection возвращает myCollection (кстати, а нормальные имена было придумать никак? - без этого уродливого my и чтобы верхний регистр применялся более, м-м-м, единообразно).

updatePost(title: string, url: string, id:number): void {
    const update: Picture[] = this.collection.map((p)=>{
        p.id  = id;
        p.title = title;
        p.url = url
    });
}

Если цель - обновление элементов массива, надо использовать forEach вместо map, и нет необходимости в получении результата. И зачем вы обновляете весь массив, если по вашим же словам обновить нужно всего один элемент? Или вы не понимаете, что происходит в этом коде?

Надо по id найти нужный элемент и обновить только его:

Object.assign(this.collection.find(n => n.id === id), { title, url });

UPD. Ещё странный момент. Если верить вашему коду, то свойство edData является массивом:

editPost(picId: Picture[]): void {
    this.edData = picId;
}

А если смотреть на шаблон - предполагается, что это объект:

<button (click)="updatePost(titleEd.value, urlEd.value, edData.id);

Откуда у edData возьмётся id, если это массив?

https://coursehunters.net/course/angular-4-c-nulya...

Вы вставляете в начало массива, а id для вычисления берете у последнего элемента.
Гораздо правильнее, брать максимум от всех id и уже его увеличивать на еденицу:

const id: number = Math.max(0, ...this.collection.map(({id}) => id)) + 1;

Вы добавляете элементы в начало массива, а новый id вычисляете на основе последнего элемента. Очевидно же - сколько бы элементов вы ни добавили таким образом, id последнего не изменится, а значит и новые id будут одинаковыми. На вашем месте, вместо того, чтобы плясать от какого-то конкретного элемента, я бы искал максимальный id:

const id = Math.max(0, ...this.collection.map(n => n.id)) + 1;

Почему удаление элемента осуществляется в дочернем компоненте, который ни про какую collection знать не знает? Почему в родительском компоненте в качестве обработчика события указывается несуществующий метод?

Наверное, метод removePost из дочернего компонента надо разделить на два: removePost в дочернем компоненте эмитит id элемента, а removePost в родительском компоненте по этому id осуществляет удаление элемента из массива. Т.е., в дочернем:

removePost(picId: number) {
  this.remove.emit(picId);
}

В родительском:

removePost(picId: number) {
  this.collection = this.collection.filter(p => p.id !== picId);
}

Что за бред-то такой с получением индекса редактируемой строки, вы сами-то понимаете, что делаете? Его надо запоминать при открытии диалогового окна (скажем, так), а вовсе не... не... даже и не знаю, как это назвать, реально БРЕД.

if (elem == "edit") {
    app.UserBook.fullView(elem);

Понятно, elem - это строка.

fullView(elem) {
    const d = document;
    const i = elem;
    d.querySelector('#Edname').value = this.items[i].fname;

И используя эту строку как ключ, вы пытаетесь что-то достать из this.items.

Из тех самых items, которые вроде бы массив:

for (let i = 0; i < this.items.length; i++) {

Как-то странно получается, не находите?

Потому что в removeEntry у вас идет перебор всех элементов и удаление каждого.

у вас обработчик отрабатывает только 1 раз

document.addEventListener("click", (e) => {
    // Используйте e.target 
    shop.sortProductsByPrice(Product.SORT_ORDER_ASC);
    shop.show();
}, false);

Если e.target === (вашей ячейки) то перерисовывать таблицу и делать сортировку, дальше думаю разберетесь

1. После срабатывания этой строки, пропадает слушатель:

table.innerHTML += `<tfoot><tr id="total-price"><td colspan="3">Total price: 
        ${shop.totalProductsPrice}</td></tr></tfoot>`;

Вызов table.innerHTML += some;, равносилен table.innerHTML = table.innerHTML + some;
- Сначала ваш html приводится к строке и складывается с новой строкой.
- Затем результат парсится и создаются новые элементы.
- Они добавляются в таблицу, на место старых.
- Слушателей на них естественно нет.
Из-за этой же строки возникает проблема 2. Так как, каждый раз добавляется новый футер, а удаляете вы только строки с классом .data.
3. Причина в вашем приведении строки к числу. Для пустой строки оно возвращает NaN. Выражение NaN === "" возвращает false.