zlodiak

На сколько я помню, то можно задать поля для сериализации:

user_serialized = serializers.serialize('json', user, fields=('fname', 'lname' ...)

column_id за глаза

В первом примере (императивном), у Вас объект класса Calculator после создания хранит в себе состояние: this.VAT = 22. И все последующие методы этого класса работают с этим состоянием (контекстом класса).

Во втором же примере (функциональном) - напротив, никакого состояния у класса нет. Он, по сути, являет собой отдельный неймспейс для чистых функций. Функции в своей работе абсолютно не затрагивают состояние объекта.

Вообще, ИМХО, пример просто плохой. Добавьте в оба примера логику мутации (изменения) VAT, и Вам сразу же станет понятно в чём различие. Ибо в первом примере Вы будете напрямую изменять this.VAT, и использовать его потом. А во втором примере, Вам придётся прокидывать значение VAT параметром, нигде его не храня.

А отличие functional reactive и imperative reactive подходов в том, что:

1. В функциональном подходе Вся ваша программа - это, по сути, одна большая чистая функция, составленная из композиции многих маленьких (как формула в математике), и по которой данные, по сути, текут, преобразовываясь в нужный результат на выходе.

2. В императивном же подходе у Вас данные размазаны по отдельным живущим сущностям, у которых есть своё внутреннее состояние, и которые общаются между собой. Реактивность тут только в том, что у этих сущностей свойства реактивные, то есть при изменении свойства, все зависящие от него сущности перевычисляют зависящие свойства/значения.

Разница, как таковая, не в реактивности, а всего лишь в способе декомпозиции задачи. Реактивность что там, что сям, по сути одна и та же (в примере: Rx.Observable.from(items)).

Поменяйте местами две строчки, чтобы стало:

.startWith(config.playerInitCoords)
.scan(cords)

Фиддл

Звездочка разворачивает ваш цикл вот в такую конструкцию

<div appNgLoop let-ng="$implicit" [appNgLoopOf]="numbers" let-i="index">
  {{ nr }} - Foo
  Index: {{ i }}
</div>

У вас прямо в обработчике события клавиши идет проверка координат, скорости, вот это всё. Оно конечно работает, но при росте проекта скорее всего придется переделывать - обработку клавиш отдельно, скорость и границы поля - отдельно. Тем более, что проверка границ нужна будет и для NPC-противников.

С другой стороны - не стоит сильно увлекаться оверинжинирингом и создавать 50 классов там, где вся логика укладывается в десяток строк.

Прикиньте прямо сейчас как вы планируете развивать игру, как можно максимально "отвязать" компоненты друг от друга.

Ну и по мелочи - я бы вынес номера кнопок в конфиг, ибо сегодня у вас стрелки, завтра wasd, а послезавтра в это вообще с тачскрина управляется.

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

const random = {
  intFromInterval: (min, max) => Math.floor(Math.random() * (max - min)) + min,
  intFromZero: (max) => Math.floor(Math.random() * max),
};

console.log(random.intFromInterval(55, 66));

https://jsfiddle.net/b6sruud6/3/

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

document.body.appendChild(canvas);
canvas.width = 500;
canvas.height = 500;

class Square{
	constructor(color, position, size, speed){
  	this.color = color;
    this.x = position.x;
    this.y = position.y;
    this.speed = speed || {x:0,y:0};
    this.width = size.width;
    this.height = size.height    
  }
  render(ctx){
  	this.x += this.speed.x;
    this.y += this.speed.y;
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

const player = new Square('#f00', {x:100,y:100}, {width:16, height:16});


const deltaCoord = 5;
const canvasColor = '#fff';

Rx.Observable
	.fromEvent(document, 'keydown')
	.map(
		e => {
    	const s = {x:0,y:0}
			if (e.keyCode == 37) s.x -= deltaCoord;
			if (e.keyCode == 38) s.y -= deltaCoord;
			if (e.keyCode == 39) s.x += deltaCoord;
			if (e.keyCode == 40) s.y += deltaCoord; 
      console.log(s)
			return s;
		}
	)  
  .startWith({x:0,y:0})
  .subscribe(render);

function render(direction) {
	ctx.fillStyle = canvasColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  player.speed = direction;
  player.render(ctx);
}

При создании SVG элементов надо указывать пространство имён. Т.е., замените
this.renderer.createElement('svg');
на
this.renderer.createElement('svg', 'svg');

Ну и соответственно
this.renderer.createElement('circle');
на
this.renderer.createElement('circle', 'svg');

Мне этот механизм не понятен.

Обработка события selectedColorChange осуществляется автоматически - поскольку задана двусторонняя привязка для свойства selectedColor.

Как это можно понять, это документированная возможность?

Документированная.

Вы, видимо, механику происходящего не понимаете.

Есть родительский класс и есть дочерний класс.

Нет, есть расширяемый класс(класс-предок) и есть класс наследующий свойства и методы от класса-предка(класс-потомок).

У вас в классе-предке ничего из класса-потомка не доступно, вы сделали ошибочные выводы.
На самом деле в компоненте-предке определен метод ngOnInit который, наследуется и вызывается компонентом-потомком.
Вот посмотрите, я изменил ваш пример и теперь в консоли видно кем именно вызывается ngOnInit в вашем примере.
А вот так можно воспроизвести, по сути, ту же ситуацию.

Срочно подтягивайте основы JavaScript и API Angular.

Неправильно задаёте начальное значение. Вырезаем [selected], а в методе createSubForm вместо массива всех возможных значений в конструктор FormControl передаём одно. Типа так.

Есть ли причины так не делать?

Уместнее спросить - есть ли причины так делать? Мне таковые не известны. Если хотите повторно выполнить какой-то код из хука в произвольный момент - вынесите его в отдельный метод, и вызывайте этот метод.

А то, что вы показали в качестве примера, при назначении рейтинга дёргаете ngOnInit - это что же, компонент повторно инициализируется при изменении рейтинга? Нет, это не правда. Зачем же тогда вводить в заблуждение себя и тех людей, которые будут читать ваш код? Не просто же так переменным, методам, классам и т.д. дают человекопонятные имена, описывающие их назначение.

Прежде всего мне непонятно зачем происходит сравнение с index.

Затем, что это сравнение для конкретного значения выдаст true ровно один раз - так как indexOf возвращает первый индекс, по которому можно найти элемент, равный указанному. То есть, если indexOf текущего элемента равен текущему индексу, значит элемент встречен впервые, и его надо оставить.

Проблема в том, что если элемент пометить #name и после этого пытаться в родительском элементе получать его через @ViewChild, то элемент не находится потому что, как я выше говорил, элементы появляются и пропадают динамически

Можно поступить следующим образом: через ViewChild получайте элемент в дочернем компоненте, а в родительском - экземпляры дочерних компонентов через ViewChildren, из которых и доставайте, что вам надо. Выглядеть это может так.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent extends HelloComponent { // Вот тут
  name = 'Angular 6';

  constructor() {
    super(); // Первый console.log('...')
    console.log('constructor app');
  }
}

Вы AppComponent унаследовали от HelloComponent. Вызвали super(). Потом еще раз запихнули HelloComponent в шаблон:

<hello name="{{ name }}"></hello> // Второй console.log('...')
<p>
  Start editing to see some magic happen :)
</p>