Используя *ngFor с индексом, я не получаю правильный индекс из (onEditorCreated($event,i) ngx-Quill

avatar
oudekaas
7 апреля 2018 в 22:49
159
0
0

У меня есть несколько сообщений, которые отображаются на экране с помощью *ngFor. Я пытаюсь настроить таргетинг на CSS первых двух сообщений с помощью Jquery. В каждом посте, который я создаю в редакторе quill, я надеялся использовать (onEditorCreated($event, i) для получения индекса каждого поста. Однако, несмотря на то, что {{i}} отображает правильный порядок (idPost0-idPost1-idPost2 и т. д.), когда я console.log i в методе onEditorCreatedPosted($event, i), i показывает 0,0,1,2, 0, а не 0,1,2,3,4,5.

Есть идеи, что вызывает такое поведение?

<div class ="smallwrapper2" id="{{'idPost'+i}}"  *ngFor="let key of publicPostContent; let i = index" > 
 {{i}}
<button class="textBoxDeveloper" name="textBoxDeveloper" (click)="selectPublicDeveloper(key._id, key.grade)">  
<quill-editor name="editor2" 
     [style]="{'width' : 'auto', 'font-size': '10px'}"
     [(ngModel)]="key.firstLineOfText"                (onEditorCreated)="this.onEditorCreatedPosted($event, i)"
     theme="bubble"  [modules]="{toolbar: false}"  >
     <div style="overflow:hidden"></div>
</quill-editor>     
</button>
      
Источник
Zze
8 апреля 2018 в 00:10
0

Можем ли мы увидеть onEditorCreatedPosted, или это просто регистрация в данный момент?

oudekaas
8 апреля 2018 в 00:39
0

просто регистрируюсь в данный момент

oudekaas
8 апреля 2018 в 00:51
0

onEditorCreatedPosted начинается с console.log(i), после чего у меня есть 20-30 строк jquery, которые адаптируют css. Нет петель. Как будто onEditorCreated не отстает при инициализации, но никогда не становится выше, чем I равно 2, и дважды дает i = 0. Несмотря на то, что {{i}} действительно считается от 0 до 5.

Zze
8 апреля 2018 в 00:56
1

2 вещи, чтобы попробовать: 1. перетащите this на this.OnEditorCreatedPosted. 2. Вместо того, чтобы передавать i событию, попробуйте просто отслеживать его в компоненте как частный параметр и увеличивать его в начале каждого вызова.

Daniel W Strimpel
8 апреля 2018 в 02:36
1

Можете ли вы создать небольшой пример, демонстрирующий такое же поведение? Я создал плункер с тем, что вы показали выше, но у него другое поведение: plnkr.co/edit/r4vsahgyIskwoS2vfip8?p=preview

oudekaas
9 апреля 2018 в 11:11
0

@zze Я пробовал оба варианта. Думаю, проблема в использовании: import { QuillEditorComponent } from 'ngx-quill/src/quill-editor.component'; импортировать {QuillModule} из 'ngx-quill'. Когда я обновляю частный параметр indexCounter, он упоминает, что параметр изменился, когда он все еще работал над текущим.

oudekaas
9 апреля 2018 в 11:13
0

@Daniel W Strimpel, как указано выше, единственное отличие от вашего примера с плунжером заключается в том, что я использую ngx-quill, который позволяет мне использовать тег <quill-editor>. У меня такое ощущение, что инициализация quill-editor работает, но onEditorCreated — это обещание? Чтобы эта часть не синхронизировалась с циклом *ngFor? Я проверю это позже сегодня, если это так. Если у вас есть другие решения, я хотел бы услышать.

oudekaas
9 апреля 2018 в 11:28
0

@zze Я хотел бы поставить ваш ответ как правильный, я просто добавил отдельный счетчик. Мои строки Jquery были нацелены на первые два сообщения, но из-за неправильного индекса я не мог настроить их. Я просто жду, пока не будут созданы первые 3 поста. поэтому, если (счетчик == 3), я использую строки JQUERY. Это решает проблему для меня. Что касается того, почему onEditorCreated не дает правильные индексы, я думаю, что onEditorCreated показывает, когда редактор quill "готов", поэтому, вероятно, потребуется некоторое время, прежде чем он будет инициализирован, я не уверен, поскольку это не объясняет, почему индекс дает 0,1,1,2,0.

Zze
9 апреля 2018 в 21:27
0

@oudekaas Да, я не уверен, почему он регистрирует такие странные значения. Я рад, что у вас все же получилось!

Ответы (0)