Николай Семенов

почему он может не перерисовывается когда данные поступают?

Ни почему.

Компонент перерисовывается.

С тем же результатом, что и без данных.

Потому что забыли .length где-то здесь:

Object.keys(this.props.landingState) > 0

Привет, Николай Семенов.
Ну ты же на самом деле хочешь ответ, как сделать, чтобы работало?)))
Будет тебе ответ. Но вначале ответ на твой прямой вопрос - ангуляр так не умеет. Туда, в квадратные скобки, можно передать значение выражения, но не само выражение, при этом chartData[indicators] тоже прокатит. Так что так нельзя.

Но если очень хочется то используй Pipe.
Это. кстати, гораздо лучше, чем использовать метод, производительность лучше. Но хозяин барин.

Итак варианты:
1. так себе. Если ты в doCheck() посмотришь сколько раз будет вызван метод getFilteredData(), то будет долго глаз дергаться.

<p-multiSelect [options]="getFilteredData()" [(ngModel)]="textAuxiliaryAxis"
          maxSelectedLabels=3 defaultLabel="Выберите параметр" filterPlaceHolder="Поиск" (onChange)="delGraph($event, 'auxiliary')">
        </p-multiSelect>

2. Вариант хороший и оптимальный

<p-multiSelect [options]="chartData[indicators] | myCoolPipe: 'main' " [(ngModel)]="textAuxiliaryAxis"
          maxSelectedLabels=3 defaultLabel="Выберите параметр" filterPlaceHolder="Поиск" (onChange)="delGraph($event, 'auxiliary')">
        </p-multiSelect>

@Pipe( selector: 'myCoolPipe')
export class MyCoolPipe implements PipeTransform {
  public transform(value: any, filter: string = ''): string {
   if (value) {
       return value.filter(v => v.axis !== filter);
   }
}

Pipe кэширует запросы и не запускается миллиард раз.

Для этого используется environment файл.

Исчерпывающее руководство

если всё плохо, и сгенерировать настоящий xlsx каким-нить POI на сервере никак нельзя, то можно по-колхозному сгенерировать html таблицу и отдать её файлом с ёкселевским расширением и Content-Type: application/vnd.ms-excel

ёксель будет ругаться, но откроет и даже какое-то оформление попытается воспроизвести, если оно инлайновыми стилями задано. ещё можно пытаться ёкселевские атрибуты ячейкам добавлять, подсмотрев их в том хтмл, который сам ёксель выгружает.

это, конечно, не полноценное решение, но зато тривиально реализуемое чисто на клиенте.

querySelector

@ViewChild('block') block: ElementRef;

// ...

// querySelector
console.log(document.querySelector('div.block'));

// ViewChild
console.log(this.block.nativeElement);

<div class="block" #block>
 Текстовый блок
</div>

Только ручками, не хватает данных для связи объекта и массива.
Или в массив добавить id типа вот так: {id: "hair", label: 'Цвет волос', value: 'Блонд'} и далее:

datas.forEach(item => { item.value = obj[item.id] })

События в js всплывают а не тонут.
Могу предложить только симулировать событие.

Фигурная скобка пропущена перед window.form = form;

как можно соорудить из этого объект File или какой другой для отправки в форме бекенду.

Что мешает отправить прямо так?

$.post("upload.php", { myImage: data })
  .done(function() {
    console.log('saved'); 
});

А на сервере что-то вроде этого.

Если нужно именно с file, то можно попробовать так:

var blobBin = atob(dataURL.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
    array.push(blobBin.charCodeAt(i));
}
var file=new Blob([new Uint8Array(array)], {type: 'image/png'});


var formdata = new FormData();
formdata.append("myNewFileName", file);
$.ajax({
   url: "uploadFile.php",
   type: "POST",
   data: formdata,
   processData: false,
   contentType: false,
}).done(function(respond){
  alert(respond);
});

© https://stackoverflow.com/a/19032688

a {display:block;} и li, если обозначены как inline-block, дай им width:100%;

Банальный margin-left: auto творит чудеса. Привет хитрые моменты из спецификации :)
Вот ваше решение:
https://jsfiddle.net/a0hz7hp1/3/

Что сделал не так?

Не подключил jquery? Не посмотрел ошибки в консоли? Не сделал интерактивный пример, который мы могли бы посмотреть?

Попробуйте вот так переписать(возможны ошибки в синтаксисе):

getCategories (cb) {
        setTimeout(() => {
            Vue.http.get('category')
            .then(response => response.json())
            .then(data => {
                if (data) {
                    console.log(data);
                    cb(data)
                }
            }
       }), 100) 
    },

Помните что события вызываются последовательно. Что произошло перед драгстартом? Конечно же клик:

onmousedown -> запомнили место
ondragstart -> начали тащить
ondragend -> дотащили

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>Document</title>
		
		<style>
			.block {
				width: 200px;
				height: 200px;
				background-color: magenta;
				display: none;
			}
			.block.open { display: block }
		</style>
	</head>
	<body>
		<button>кнопка</button>
		<div class="block">asd</div>

		<script>
			(() => {
				const block = document.querySelector('.block');
				const button = document.querySelector('button');
				
				function toggle() {
					block.classList.toggle('open');
				}
				function remove() {
					block.classList.remove('open');
				}
				
				document.addEventListener('click', e => {
					const target = e.target;
					
					target === button ? toggle() : target !== block ? remove() : false;
				});
			})();
		</script>
	</body>
</html>