Ответы пользователя по тегу Angular
  • Angular. Как правильно отобразить один json объект в представлении?

    @kttotto
    пофиг на чем писать
    <div *ngIf="item | async as any">
      id: {{item.id }} name: {{ item.name }} 
    </div>
    Ответ написан
    Комментировать
  • Как решить ошибку undefined' is not assignable to type 'CdkTableDataSourceInput' и почему она возникла?

    @kttotto
    пофиг на чем писать
    В ошибке все написано: тип MatTableDataSource не соответствует типу CdkTableDataSourceInput. Видимо Вы пытаетесь передать в компонент поле типа MatTableDataSource, это Ваш dataSource, а он ожидается параметр типа CdkTableDataSourceInput.
    Ответ написан
  • Как вывести данные на API Яндекс Карт?

    @kttotto
    пофиг на чем писать
    1. Разобраться с API яндекс карт, например здесь. Прочитать документацию и разобрать примеры.
    2. Реализовать сервис для этого API с методами, например, showOnMap(offers).
    3. Добавить контейнер в компонент для карты и сделать привязку с сервисом.
    Ответ написан
    Комментировать
  • Почему Angular CDK при возвращении назад через браузер убирает query параметры?

    @kttotto
    пофиг на чем писать
    Вы лучше показали бы код роутинга и как вызывается метод open, точнее, как обрабатываются параметры url.

    Возможно это связано с настройкой роутера, например, нет настройки для страницы с параметром, он переходит на основную, дальше внутри компонента видимо есть subscribe на route и уже там обрабатываются параметры url, происходит navigate, открытие модалки. Предполагаю, что нужно просто добавить роут с параметром, а остальную логику возможно менять не придется.

    Но так же возможно где-то есть этот лишний navigate. В общем нужно другой код смотреть, нет смысла смотреть как открывается модалка, нужно смотреть как обрабатываются переходы.
    Ответ написан
  • Как получить сразу 2 объекта api?

    @kttotto
    пофиг на чем писать
    (data: any) => ((this.albums = data.albums), (this.menu = data.menu)),

    Что за странный синтаксис, что Вы этим хотите?
    Почему не написать обычно?
    (data: any) => {
        this.albums = data.albums;
        this.menu = data.menu;
    }

    public ngOnInit(): void {
    this.getQueryParams();
    this. findAll();
    }

    И, кстати, это не совсем верно. Метод findAll зависит от this.params который инициализируется в getQueryParams. А findAll начнет выполняться раньше, чем выполнится getQueryParams.
    Их нужно запихнуть в pipe
    this.route.queryParams
        .pipe(
            mergeMap((params: Params) => {
                this.params = {
                    skip: params['skip'],
                    take: params['take'],
                };
                return this.albumService.findAll(this.params)
            ),
            tap((data: any) => {
                this.albums = data.albums;
                this.menu = data.menu;
            }),
            catchError(error => {
                this.error = error.message;
                console.error(error);
                return EMPTY;
            })
        })
        .subscribe();
    Ответ написан
    1 комментарий
  • Как подписаться на изменение переменной и выполнить вызов функции один раз для последнего элемента?

    @kttotto
    пофиг на чем писать
    Зависит от того, что такое "последний клик" и как Вы определяете, что он последний. Если имеете в виду, что можно быстро кликнуть несколько раз по элементу и на каждый клик срабатывает отправка, а надо, чтобы только один раз, после "последнего клика в группе быстрых кликов", то для этого есть оператор https://rxjs.dev/api/operators/debounce. Событие пройдет только когда после клика пройдет заданное время. Например, это используется при наборе в поисковой строке: нам не нужен запрос на ввод каждой буквы (а набирают быстро), будет выжидаться пауза между набором символов, как только она появится, произойдет запрос.
    Ответ написан
    3 комментария
  • Отслеживание изменений в сервисе Angular?

    @kttotto
    пофиг на чем писать
    Непонятен вопрос. Подпишитесь на изменение данных и измените данные в другом.
    <mat-slider (ngModelChange)="helpersService.slideValue1$.next(Number($event))"
                [ngModel]="helpersService.slideValue1$.value"
                min="0"
                max="100"></mat-slider>
    
    
    ngOnInit(): void {
        this.helpersService.slideValue1$
            .pipe(
                takeUntil(this.destroy$),
                tap(value => {
                    this.helpersService.slideValue2$.next(value);
                )
            )
            .subscribe();
    };
    
    // или с методом
    updateSliderValue(event: MatSliderChange){
        this.helpersService.slideValue1$.next(Number(event));
    }
    Ответ написан
    1 комментарий
  • Как решить проблему при сборке проекта Angular?

    @kttotto
    пофиг на чем писать
    В сообщении все написано
    ERROR TypeError: Cannot set properties of null (setting 'statusCode')

    Не может проинициализировать поле, т.к. оно null

    this.response наверняка undefined или null во время открытия компонента.
    Добавь проверку
    if (!!this.response) {
      this.response.statusCode = 404;
      this.response.statusMessage = '404 - Page Not Found';
    }
    Ответ написан
    Комментировать
  • Как добавить или пробросить событие focus() на кастомный дочерний компонент в Angular?

    @kttotto
    пофиг на чем писать
    Создать в дочернем компоненте метод, который будет делать фокус. А из родителя этот метод дергать как this.myCustomButton.focus()
    Ответ написан
    3 комментария
  • В чем ошибка во время компиляции?

    @kttotto
    пофиг на чем писать
    Зачем Вам gulp к webpack-у? С большой долей вероятности, проблема из-за него, причина ошибки в трейсе написана, это циклическая зависимость
    20 error code ELIFECYCLE
    21 error errno 1
    22 error kokos-uwidget@0.1.0 build: `node node_modules/webpack/bin/webpack.js && node node_modules/gulp/bin/gulp.js`
    22 error Exit status 1
    23 error Failed at the kokos-uwidget@0.1.0 build script.
    Ответ написан
    Комментировать
  • Как мне получить доступ к значениям компонента angular из контекста функции window?

    @kttotto
    пофиг на чем писать
    А если так?
    window.onpopstate = (event) => {
       console.log(this);
       this.my_func();  //идёт потеря контекста, а мне нужно запустить эту функцию
    };

    Или
    ngOnInit(){
        this.my_func();
    
        const self = this;
    
        window.onpopstate = function(event) {
        console.log(self );
        self.my_func();  //идёт потеря контекста, а мне нужно запустить эту функцию
      };
    }

    Или
    const callback = function(event) {
        console.log(this);
        this.my_func();
    }
    window.onpopstate = callback.bind(this);
    Ответ написан
    Комментировать
  • Как вернуть Observable с агрегированным результатом других Observable?

    @kttotto Автор вопроса
    пофиг на чем писать
    Спасибо всем за соучастие. Все заработало как задумано, сам метод получился вполне рабочим, может кому реальный пример поможет. Если можно было сделать проще или "правильнее" - не стесняемся комментировать.

    PS: В чем заключалась проблема, так сказать мотивация)
    Есть внешний api, который принимает массив параметров, в ответ он возвращает один объект.
    Но на один из параметров он внутри падает с 500-ой. Как временное решение этой проблемы: сначала пытаемся получить ответ по всему массиву, если падает с ошибкой, то делаем запросы по одному, по каждому параметру, ответы собираем в один объект. Если по какому то параметру падает запрос, то вместо реального ответа возвращаем объект заглушку, без обрыва всей цепочки запросов.

    spoiler
    getUserDictByLogins(logins: string[]): Observable<UserDict> {
        if (!logins || logins.length === 0) {
          return of({});
        }
    
        return this.getUsersByLogins(logins)
          .pipe(
            map(users => {
              const userDict = {};
              users.forEach(u => userDict[u.accountName] = u);
              return userDict;
            }),
            catchError(err => {
              console.log(err.data);
              return this.getUserDictOneByOne(logins);
            })
          );
      }
    
      private getUserDictOneByOne(logins: string[]): Observable<UserDict> {
        const observables: Observable<UserDict>[] = [];
    
        logins.forEach(login => {
          observables.push(this.getUsersByLogins([login])
            .pipe(
              map(users => {
                const userDict = {};
                users.forEach(u => userDict[u.accountName] = u);
                return userDict;
              }),
              catchError(err => {
                console.log("Error getting user data: ", login);
                console.log(err.data);
                const userDict = {};
                const userBean = {
                  accountName: login,
                  displayName: login,
                  name: login,
                  fioShort: login,
                  iofShort: login
                };
                userDict[login] = userBean;
                return of(userDict);
              })));
        });
    
        return forkJoin(observables)
          .pipe(
            map((userDicts) => {
              const userDict = {};
              userDicts.forEach(u => Object.assign(userDict, u));
              return userDict;
            })
        );
      }
    Ответ написан
  • Как выключить в ангуляр удаление пробелов?

    @kttotto
    пофиг на чем писать
    Позиционирование элементов на странице не должно зависеть от пробелов и ентеров в верстке. Делайте настройку с помощью css. Вы, повидимому, сделали <h> и <p> инлановыми, что судя по контекту - неверно. Сделайте их как <label> и как <span> соответственно, добавьте нужные css правила для размера и жирности, добавьте margin-left. И тогда не придется искать костыли для неудаления пробелов в разметке.
    Ответ написан
    Комментировать
  • Информация не сохраняется в БД?

    @kttotto
    пофиг на чем писать
    500 может выскочить когда не находит нужный урл. Проверьте тот урл, по которому идет запрос из клиента и что он есть на сервере.
    Ответ написан