Как мне работать с данными из @input в Angular?
Новичок в Angular, так что будьте милы ...
У меня есть компонент, который получает значение даты / строки от родительского компонента:
export class myComponent implements OnInit {
@Input() myDate: string;
constructor(){}
ngOnInit(){}
}
Моя проблема заключается в том, что я хочу использовать метод split () в строке @Input myDate, чтобы я мог использовать части (индексы массива, назначенные переменным) в представлении индивидуально.
Я пробовал следовать руководству по Angular и в итоге получил это в своем классе:
private _myDate;
@Input()
set myDate(myDate: string){
this._myDate = (myDate && myDate.split(' '));
}
get myDate(): string { return this._myDate };
но это возвращает неопределенный, и я не знаю, идет ли код, который мне нужно написать, в класс или в конструктор (потому что я вижу противоречивую информацию по всей сети).
Вариант выше возвращает «Разделение свойств не существует для типа String []», что имеет смысл, но я не могу понять, как избежать этой ошибки или в первом примере кода не могу преобразовать строку типа в массив :
private _myDate = [];
@Input()
set myDate(myDate: Array<String>){
this._myDate = (myDate && myDate.split(' '));
}
get myDate(): Array<String> { return this._myDate };
Итак, как мне работать со значением @Input myDate и где мне это делать?
Как выглядит значение, которое вам дано в компоненте? А что вы хотите делать с массивом и его индексами?
Анжил. Честно говоря, я не знаю, я следовал руководству по началу работы с google / angular, и у меня было мало времени. Сожалею. @Batajus значение, которое я импортирую, представляет собой строку, отформатированную как «12 мая, 2017», и я хочу разбить ее на datePart [0] = 12, datePart [1] = May, datePart [2] = 2017, чтобы вызвать каждую datePart в шаблон отдельно. Понятия не имею, правильно ли вы все сделаете. Любые советы принимаю с благодарностью :)
в вашем дочернем компоненте вы можете написать, например, {{myDate [0]}}. но я думаю, что вам не нужно использовать this._myDate = (myDate && myDate.split ('')). Я думаю, вы хотите это сказать ._myDate = myDate? myDate.split (''): []. ПРИМЕЧАНИЕ. Объявите тип переменной private _myDate: string [] = [];
@AnjilDhamala Нет, в JavaScript использование && для не-логических значений возвращает либо первое ложное значение, либо последнее значение. В этом случае он вернет myDate, если он null / undefined / empty, в противном случае он вернет результат split.
@JohnMontgomery Ах да! Я так привык использовать «или», что забыл, что мы тоже можем использовать «и».
Ответы 3
Вы можете использовать его внутри ngOnChanges
ngOnChanges(changes: SimpleChanges) {
if (changes['myDate']) {
this._myDate = (myDate && myDate.split(' '));
}
}
это не обязательно, использование сеттера на входе должно быть получено
Обычно я не использую сеттер, но могу предположить, что вы можете просто сделать это и добиться того, чего хотите.
<your-component-selector [myDate] = "somePropertyInParentClass"></your-component-selector>
Дочерний компонент будет выглядеть примерно так:
export class YourComponent implements AfterViewInit {
@Input() myDate: any;
ngAfterViewInit() {
this.myDate = this.myDate.split(" ");
}
}
После этого просто переберите опору myDate, используя *ngFor в вашем представлении.
Для достижения желаемой цели вы можете сделать следующее:
private _myDate: string[];
@Input()
set myDate(myDate: string){ // You're receiving a string, so the correct typing is string and not Array<string>
// For a clean 'string' you need to remove the , from your given value
let cleanDate: string = myDate.replace(',', '');
// After you've removed the , you can simply split the string to get your array
this._myDate = cleanDate.split(' ');
}
get myDate(): string { return this._myDate };
Надеюсь, мои комментарии понятны ;-)
Я использовал этот ответ с парой небольших изменений. Во-первых, _myDate, который я должен был установить как public в первой строке (private выдал ошибку в линтере), и геттер у меня вообще не работал, выдавая ошибку и там (не на этом ПК, поэтому не могу вспомнить что это было, извините). Спасибо @Batajus
Разве это (myDate && myDate.split ('')) не возвращает логический ответ?