У меня есть несколько сообщений, которые отображаются на экране с помощью *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>
Можем ли мы увидеть
onEditorCreatedPosted
, или это просто регистрация в данный момент?просто регистрируюсь в данный момент
onEditorCreatedPosted начинается с console.log(i), после чего у меня есть 20-30 строк jquery, которые адаптируют css. Нет петель. Как будто onEditorCreated не отстает при инициализации, но никогда не становится выше, чем I равно 2, и дважды дает i = 0. Несмотря на то, что {{i}} действительно считается от 0 до 5.
2 вещи, чтобы попробовать: 1. перетащите
this
наthis.OnEditorCreatedPosted
. 2. Вместо того, чтобы передаватьi
событию, попробуйте просто отслеживать его в компоненте как частный параметр и увеличивать его в начале каждого вызова.Можете ли вы создать небольшой пример, демонстрирующий такое же поведение? Я создал плункер с тем, что вы показали выше, но у него другое поведение: plnkr.co/edit/r4vsahgyIskwoS2vfip8?p=preview
@zze Я пробовал оба варианта. Думаю, проблема в использовании: import { QuillEditorComponent } from 'ngx-quill/src/quill-editor.component'; импортировать {QuillModule} из 'ngx-quill'. Когда я обновляю частный параметр indexCounter, он упоминает, что параметр изменился, когда он все еще работал над текущим.
@Daniel W Strimpel, как указано выше, единственное отличие от вашего примера с плунжером заключается в том, что я использую ngx-quill, который позволяет мне использовать тег <quill-editor>. У меня такое ощущение, что инициализация quill-editor работает, но onEditorCreated — это обещание? Чтобы эта часть не синхронизировалась с циклом *ngFor? Я проверю это позже сегодня, если это так. Если у вас есть другие решения, я хотел бы услышать.
@zze Я хотел бы поставить ваш ответ как правильный, я просто добавил отдельный счетчик. Мои строки Jquery были нацелены на первые два сообщения, но из-за неправильного индекса я не мог настроить их. Я просто жду, пока не будут созданы первые 3 поста. поэтому, если (счетчик == 3), я использую строки JQUERY. Это решает проблему для меня. Что касается того, почему onEditorCreated не дает правильные индексы, я думаю, что onEditorCreated показывает, когда редактор quill "готов", поэтому, вероятно, потребуется некоторое время, прежде чем он будет инициализирован, я не уверен, поскольку это не объясняет, почему индекс дает 0,1,1,2,0.
@oudekaas Да, я не уверен, почему он регистрирует такие странные значения. Я рад, что у вас все же получилось!